/* ===========================================================================
   Solarizzy — identidade visual do redesign R1 (22/09/2026), kit da R6 (23/09/2026).

   Layout de CRM: header escuro com o menu no topo (#topo), área de trabalho
   larga sem teto de largura (#areaTrabalho) e cartões brancos sobre fundo
   claro. Referência aprovada pelo usuário em 22/09 (tela "Painel").

   Toda cor sai de token deste bloco: fora dele não há hex (o C5 da R1 conta).
   Os nomes --sol-* foram mantidos porque o HTML e o JS usam por var().

   R6: o kit de componentes do mock (gestao.html, prancha 8): rótulo 13px/600
   #3D4C55, campo de 15px com foco em contorno âmbar, botões em 5 variantes,
   chips, seletor segmentado, tabela, indicador, toast, modal e os três estados
   de lista. Os pares de cor (fundo/texto) de aviso, ok e perigo são os do mock.

   O texto sobre --sol-acao (amarelo) é --sol-acao-tinta, escuro: 8.98:1.
   Os itens inativos do menu usam --sol-topo-texto (8.27:1 sobre o header).
   =========================================================================== */

:root {
    --sol-primaria: #0E1F2B;
    --sol-acao: #F2A516;
    --sol-acao-hover: #E59A0C;
    --sol-acao-tinta: #1A1204;
    --sol-fundo: #F4F5F2;
    --sol-fundo-2: #FAFBF9;
    --sol-superficie: #FFFFFF;
    --sol-tinta: #15232D;
    --sol-tinta-2: #5B6B75;
    --sol-rotulo: #3D4C55;
    --sol-linha: #E3E6E0;
    --sol-neutro: #EEF0EC;
    --sol-traco: #B8BEB4;

    /* Pares do mock: fundo suave + texto que passa de 4.5:1 sobre ele. */
    --sol-ok: #0F7B6C;
    --sol-ok-fundo: #E1F2EF;
    --sol-ok-tinta: #0B5E53;
    --sol-aviso: #8A4B06;
    --sol-aviso-fundo: #FEF3DC;
    --sol-aviso-tinta: #8A4B06;
    --sol-aviso-forte: #6B3A04;
    --sol-perigo: #B42318;
    --sol-perigo-fundo: #FDECEA;
    --sol-perigo-btn-fundo: #FBEAE7;
    --sol-perigo-btn: #A1281A;
    --sol-perigo-btn-borda: #F1C9C2;
    --sol-perigo-btn-fundo-hover: #F8DDD8;
    --sol-perigo-btn-hover: #8E1F13;
    --sol-erro: var(--sol-perigo);

    --sol-topo-2: #1B3140;
    --sol-topo-3: #3A5566;
    --sol-topo-texto: #A9B8C3;
    --sol-avatar: #2A4658;
    --sol-borda-campo: #CFD4CC;
    --sol-link: #B45309;

    /* Tons derivados: sempre misturados com a superfície, para o fundo
       continuar opaco e o contraste medido ser o que se vê. */
    --sol-acao-suave: color-mix(in srgb, var(--sol-acao) 16%, var(--sol-superficie));

    /* Escala de espaçamento: múltiplos de 4 */
    --e-1: 4px;
    --e-2: 8px;
    --e-3: 12px;
    --e-4: 16px;
    --e-5: 24px;
    --e-6: 32px;
    --e-7: 40px;

    --raio: 8px;
    --raio-g: 12px;
    --sombra: 0 1px 2px rgba(14, 31, 43, .04), 0 2px 8px rgba(14, 31, 43, .05);
    --sombra-alta: 0 12px 40px rgba(14, 31, 43, .18);
    --sombra-toast: 0 8px 24px rgba(14, 31, 43, .12);
    --sombra-modal: 0 20px 48px rgba(14, 31, 43, .3);
    --sombra-topo: 0 1px 0 rgba(14, 31, 43, .25);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    line-height: 1.5;
    background: var(--sol-fundo);
    color: var(--sol-tinta);
    -webkit-font-smoothing: antialiased;
}

/* O modelo de contrato é o único texto monoespaçado do app. */
#solarContratoModelo,
code, kbd, pre { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }

.oculto { display: none; }

h1 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 var(--e-4); }
h2 { font-size: 16px; font-weight: 700; margin: 0; }
h3 { font-size: 20px; font-weight: 700; letter-spacing: -.015em; margin: 0; }
h4 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
/* R6: o h5 em maiúsculas espaçadas era herança do elétrico; vira subtítulo de seção. */
h5 { font-size: 14px; font-weight: 700; color: var(--sol-rotulo); margin: 0 0 var(--e-2); }
a { color: var(--sol-link); }

/* --- Ícones de traço (sprite no index.html; icone() no JS) --- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic, .marca {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}
.ic { width: 16px; height: 16px; vertical-align: -3px; }
.ic-forte { stroke-width: 2.5; }
.ic-20 { width: 20px; height: 20px; }
.ic-24 { width: 24px; height: 24px; }
.marca { width: 26px; height: 26px; stroke-width: 2; }

/* --- Header do app: marca, menu, busca, ação principal, conta --- */
#telaApp { min-height: 100vh; }

#topo {
    position: sticky;
    top: 0;
    z-index: 30;
    height: 64px;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 0 var(--e-6);   /* mock (design/gera.py header): padding 0 32px, gap 28px */
    background: var(--sol-primaria);
    color: var(--sol-superficie);
    box-shadow: var(--sombra-topo);
}
.topo-marca {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 var(--e-3) 0 0;
    font-size: 17px;
    font-weight: 800;
    white-space: nowrap;
    color: var(--sol-superficie);
}
.topo-marca .marca { color: var(--sol-acao); }

.topo-menu {
    display: flex;
    align-self: stretch;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.topo-menu::-webkit-scrollbar { display: none; }

/* Item de menu: ocupa a altura toda do header para o sublinhado da aba ativa
   encostar na borda de baixo. */
.topo-menu button {
    margin: 0;
    height: 64px;
    padding: 3px 14px 0;
    background: transparent;
    color: var(--sol-topo-texto);
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}
.topo-menu button:hover { color: var(--sol-superficie); filter: none; }
.topo-menu [data-aba].ativo { color: var(--sol-superficie); font-weight: 600; border-bottom: 3px solid var(--sol-acao); }

/* Busca do mock: 300px, lupa e placeholder, fundo do header um tom acima. */
.topo-busca { position: relative; flex: 0 0 300px; }
.topo-busca label {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    height: 40px;
    margin: 0;
    padding: 0 var(--e-3);
    background: var(--sol-topo-2);
    border-radius: var(--raio);
    color: var(--sol-topo-texto);
    font-weight: 500;
}
.topo-busca label:focus-within { outline: 2px solid var(--sol-acao); outline-offset: 1px; }
.topo-busca input {
    flex: 1;
    min-width: 0;
    height: 38px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--sol-superficie);
    font-size: 14px;
}
.topo-busca input::placeholder { color: var(--sol-topo-texto); opacity: 1; }
.topo-busca input:focus { outline: none; }
.busca-painel {
    position: absolute;
    top: calc(100% + var(--e-2));
    left: 0;
    right: 0;
    z-index: 40;
    max-height: 380px;
    overflow-y: auto;
    padding: var(--e-1) 0;
    background: var(--sol-superficie);
    color: var(--sol-tinta);
    border: 1px solid var(--sol-linha);
    border-radius: var(--raio-g);
    box-shadow: var(--sombra-alta);
}
.busca-grupo { margin: 0; padding: 10px 14px 4px; font-size: 12px; font-weight: 700; color: var(--sol-tinta-2); }
.busca-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    margin: 0;
    padding: 10px 14px;
    background: transparent;
    color: var(--sol-tinta);
    border: 0;
    border-radius: 0;
    text-align: left;
    font-size: 14px;
    font-weight: 700;
}
.busca-item span { font-size: 13px; font-weight: 500; color: var(--sol-tinta-2); }
.busca-item:hover, .busca-item:focus-visible { background: var(--sol-fundo); filter: none; }
.busca-vazio { margin: 0; padding: 14px; font-size: 14px; color: var(--sol-tinta-2); }

[data-acao="nova-proposta"] {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    margin: 0;
    height: 40px;
    padding: 0 var(--e-4);
    background: var(--sol-acao);
    color: var(--sol-acao-tinta);
    border: 0;
    border-radius: var(--raio);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}
[data-acao="nova-proposta"]:hover { background: var(--sol-acao-hover); filter: none; }

/* Avatar com as iniciais e o menu da conta (Configurações, Sair). */
.topo-conta { position: relative; flex-shrink: 0; }
#btnConta {
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--sol-avatar);
    color: var(--sol-superficie);
    font-size: 14px;
    font-weight: 700;
}
#btnConta:hover, #btnConta[aria-expanded="true"] { background: var(--sol-topo-3); filter: none; }
.menu-conta {
    position: absolute;
    top: calc(100% + var(--e-2));
    right: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    min-width: 240px;
    padding: 6px;
    background: var(--sol-superficie);
    color: var(--sol-tinta);
    border: 1px solid var(--sol-linha);
    border-radius: var(--raio-g);
    box-shadow: var(--sombra-alta);
}
.menu-conta-quem {
    white-space: pre-line;
    margin: 0 0 var(--e-1);
    padding: var(--e-2) var(--e-3) 10px;
    border-bottom: 1px solid var(--sol-neutro);
    font-size: 13px;
    color: var(--sol-tinta-2);
    overflow-wrap: anywhere;
}
.menu-conta-quem:empty { display: none; }
.menu-conta button {
    margin: 0;
    height: 40px;
    padding: 0 var(--e-3);
    background: transparent;
    color: var(--sol-tinta);
    border: 0;
    border-radius: var(--raio);
    text-align: left;
    font-size: 14px;
    font-weight: 600;
}
.menu-conta button:hover { background: var(--sol-fundo); filter: none; }
.menu-conta [data-aba].ativo { background: var(--sol-acao-suave); }
.menu-conta #btnSair { color: var(--sol-perigo); }

/* A busca tem os 300px do mock a partir de 1420px; entre 1366 e 1419 encolhe para 220px; abaixo
   disso some, para os 7 itens do menu não rolarem. Com o header do mock (padding 0 32px, gap 28px) o menu
   já corta a 1300px com a busca de 220px -- medido com r6/mede_topo.js; por isso a busca some abaixo de 1366. */
@media (max-width: 1419px) {
    .topo-busca { flex-basis: 220px; }
}
@media (max-width: 1365px) {
    .topo-busca { display: none; }
}
@media (max-width: 760px) {
    /* R4: o menu desce para uma 2ª linha rolável; a máscara (alfa, não cor)
       apaga a borda direita para indicar que há mais itens. O #topo é sticky
       e ocupa espaço no fluxo: com height auto, as duas linhas empurram o
       conteúdo em vez de cobri-lo. */
    #topo { padding: var(--e-3) var(--e-4) 0; gap: var(--e-2); flex-wrap: wrap; height: auto; }
    .topo-marca { font-size: 0; margin: 0 auto 0 0; }
    [data-acao="nova-proposta"] { padding: 0 var(--e-3); }
    .topo-conta { margin-right: 0; }
    .topo-menu { order: 1; flex-basis: 100%; mask-image: linear-gradient(to right, black 96%, transparent); overscroll-behavior-x: contain; }
    .topo-menu button { height: 44px; padding: 3px 10px 0; }   /* S6c: 5 itens cabem em 390px; o resto rola dentro do contêiner */
}

#avisoApp { margin: 0; padding: var(--e-3) var(--e-7); background: var(--sol-perigo-fundo); color: var(--sol-perigo); }
#avisoApp:empty { display: none; }

/* --- Área de trabalho: larga, sem teto de largura, respiro de 40px --- */
#areaTrabalho {
    display: block;
    width: 100%;
    max-width: none;
    padding: var(--e-6) var(--e-7) 48px;
}
@media (max-width: 760px) {
    #areaTrabalho { padding: var(--e-5) var(--e-4) var(--e-6); }
}

/* Topo de página do mock (h1 + subtítulo), no lugar dos dois cabeçalhos de seção herdados do elétrico. */
.pagina-topo { margin: 0 0 var(--e-5); }
.pagina-topo h1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.3px; }
.pagina-topo p { margin: var(--e-1) 0 0; font-size: 14px; color: var(--sol-tinta-2); }

/* --- Login dividido (mock, prancha 7a) --- */
#telaLogin:not(.oculto) { min-height: 100vh; display: flex; background: var(--sol-fundo); }
.login-marca {
    width: 620px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 56px 64px;
    background: var(--sol-primaria);
    color: var(--sol-superficie);
}
.login-logo { display: flex; align-items: center; gap: var(--e-3); font-size: 24px; font-weight: 800; letter-spacing: -.3px; }
.login-logo .marca { width: 40px; height: 40px; color: var(--sol-acao); }
.login-marca h1 { margin: 72px 0 0; font-size: 38px; line-height: 1.15; font-weight: 800; letter-spacing: -.8px; }
.login-marca > p { margin: var(--e-4) 0 44px; max-width: 440px; font-size: 16px; line-height: 1.6; color: var(--sol-topo-texto); }
.login-passos { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.login-passos li { display: flex; gap: 14px; position: relative; padding-bottom: 18px; }
.login-passos li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 32px;
    bottom: 4px;
    width: 2px;
    background: var(--sol-avatar);
}
.login-passos li.ok:not(:last-child)::before { background: var(--sol-ok); }
.login-passos strong { display: block; padding-top: 3px; font-size: 15px; color: var(--sol-superficie); }
.login-passos li > span:last-child > span { display: block; margin-top: 2px; font-size: 13px; color: var(--sol-topo-texto); }
.lp-bola {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--sol-topo-3);
    color: var(--sol-topo-texto);
    font-size: 13px;
    font-weight: 700;
}
.lp-bola.atual { background: var(--sol-acao); border-color: var(--sol-acao); color: var(--sol-acao-tinta); font-weight: 800; }
.lp-bola.ok { background: var(--sol-ok); border-color: var(--sol-ok); color: var(--sol-superficie); }
.lp-bola.ok .ic { stroke-width: 3; width: 14px; height: 14px; }
.login-rodape { margin-top: auto; font-size: 13px; color: var(--sol-topo-texto); }

.login-lado { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--e-5); }
.caixa { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 18px; }
.caixa h2 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.4px; }
.login-sub { margin: 6px 0 0; font-size: 15px; color: var(--sol-tinta-2); }
.caixa label { display: block; margin: 0 0 6px; }
.caixa input { width: 100%; height: 44px; }
.login-senha-rotulo { display: flex; justify-content: space-between; align-items: baseline; }
.login-senha-rotulo .btn-txt { font-size: 13px; }
.login-senha { position: relative; }
.login-senha input { padding-right: 104px; }
.btn-olho {
    position: absolute;
    right: 6px;
    top: 6px;
    height: 32px;
    margin: 0;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: var(--sol-rotulo);
    border: 0;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
}
.btn-olho:hover { background: var(--sol-neutro); filter: none; }
#btnEntrar { height: 48px; margin: 0; border-radius: 10px; background: var(--sol-acao); color: var(--sol-acao-tinta); font-size: 15px; font-weight: 800; }
#btnEntrar:hover { background: var(--sol-acao-hover); filter: none; }
.login-divisa { display: flex; align-items: center; gap: var(--e-3); margin: 0; font-size: 13px; color: var(--sol-tinta-2); }
.login-divisa::before, .login-divisa::after { content: ""; flex: 1; height: 1px; background: var(--sol-linha); }
.caixa .login-criar { width: 100%; min-height: 48px; margin: 0; }

/* SZ-2: o que a marca do Console traz (logo, tagline, link de suporte). Só aparece quando o campo existe (hidden); o logo claro substitui o sol. */
.marca-img { height: 26px; width: auto; max-width: 160px; object-fit: contain; flex-shrink: 0; }
.login-logo .marca-img { height: 40px; max-width: 220px; }
.marca-img + .marca { display: none; }
.login-tagline { margin-top: var(--e-2); font-size: 14px; color: var(--sol-topo-texto); }
.marca-img-escuro { align-self: flex-start; height: 36px; width: auto; max-width: 200px; object-fit: contain; }
.login-suporte { margin: 0; text-align: center; font-size: 13px; color: var(--sol-tinta-2); }

/* Faixa de aviso do login (conta sem o plano Solar, sessão expirada, credencial errada).
   Some sozinha quando #avisoLogin está vazio: o JS só escreve o texto. */
.faixa-aviso { display: flex; gap: var(--e-3); padding: var(--e-4); background: var(--sol-aviso-fundo); border-radius: 10px; color: var(--sol-aviso-forte); }
.faixa-aviso > .ic { width: 20px; height: 20px; color: var(--sol-aviso-tinta); margin-top: 1px; }
.faixa-aviso:has(#avisoLogin:empty) { display: none; }
#avisoLogin { margin: 0; font-size: 14px; line-height: 1.5; }
#avisoLogin strong { display: block; margin-bottom: 4px; font-size: 15px; }

@media (max-width: 960px) {
    #telaLogin:not(.oculto) { flex-direction: column; }
    .login-marca { width: auto; padding: var(--e-6) var(--e-5); }
    .login-marca h1 { margin-top: var(--e-5); font-size: 26px; }
    .login-marca > p, .login-passos, .login-rodape { display: none; }
    .login-lado { align-items: flex-start; padding: var(--e-6) var(--e-4); }
}

/* --- Formulários: rótulo 13px/600 em cima, campo de 44px com texto de 15px --- */
label { font-size: 13px; font-weight: 600; color: var(--sol-rotulo); margin-top: var(--e-2); }
input, select, textarea {
    padding: 10px var(--e-3);
    border: 1px solid var(--sol-borda-campo);
    border-radius: var(--raio);
    background: var(--sol-superficie);
    color: var(--sol-tinta);
    font-family: inherit;
    font-size: 15px;
}
/* Foco do mock: contorno 2px âmbar e borda #B45309. */
input:focus, select:focus, textarea:focus { outline: 2px solid var(--sol-acao); outline-offset: 1px; border-color: var(--sol-link); }

/* Acessibilidade: sem isto quem navega por teclado não vê onde está. Global e
   não por componente -- o foco perdido é o mesmo defeito em qualquer alvo. */
:focus-visible { outline: 2px solid var(--sol-acao); outline-offset: 2px; }

.form-group { margin-bottom: var(--e-4); }
.form-label { font-size: 13px; font-weight: 600; color: var(--sol-rotulo); display: block; margin-bottom: 6px; }
.form-control {
    display: block;
    width: 100%;
    padding: 10px var(--e-3);
    border: 1px solid var(--sol-borda-campo);
    border-radius: var(--raio);
    background: var(--sol-superficie);
    color: var(--sol-tinta);
    font-size: 15px;
}
/* Altura única de campo (44px), em todas as abas; textarea cresce livre. */
.form-control:not(textarea) { height: 44px; padding-top: 0; padding-bottom: 0; }
input[type="file"].form-control { padding-top: 6px; padding-bottom: 0; }
input[type="file"]::file-selector-button {
    margin-right: var(--e-3);
    padding: 5px var(--e-3);
    border: 1px solid var(--sol-borda-campo);
    border-radius: 6px;
    background: var(--sol-fundo);
    color: var(--sol-tinta);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
}
textarea.form-control { resize: vertical; line-height: 1.5; }

/* --- Botões: primário âmbar, escuro, com borda, texto de ação, perigo --- */
button {
    margin-top: var(--e-4);
    padding: 10px var(--e-4);
    border: 0;
    border-radius: var(--raio);
    background: var(--sol-acao);
    color: var(--sol-acao-tinta);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s, background .15s, color .15s;
}
button:hover { filter: brightness(.95); }
button:disabled { opacity: .45; cursor: default; filter: none; }

/* .btn sozinho é o "com borda" do mock (b-sec). */
.btn { width: auto; min-height: 44px; padding: 0 18px; border: 1px solid var(--sol-borda-campo); border-radius: var(--raio);
       background: var(--sol-superficie); color: var(--sol-tinta); font-size: 14px; font-weight: 700; cursor: pointer;
       margin-top: var(--e-3); display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); white-space: nowrap; }
.btn:hover { border-color: var(--sol-link); filter: none; }
.btn + .btn { margin-left: var(--e-2); }
.btn-primary, .btn-dark, .btn-success { border: 0; }   /* mock .b-am/.b-esc: sem borda */
.btn-primary { background: var(--sol-acao); color: var(--sol-acao-tinta); }
.btn-primary:hover { background: var(--sol-acao-hover); border-color: transparent; }
/* Escuro: avançar e salvar. O verde (.btn-success) do elétrico não existe no mock. */
.btn-dark, .btn-success { background: var(--sol-primaria); color: var(--sol-superficie); }
.btn-dark:hover, .btn-success:hover { background: var(--sol-topo-2); border-color: transparent; }
.btn-perigo { background: var(--sol-perigo-btn-fundo); color: var(--sol-perigo-btn); border-color: var(--sol-perigo-btn-borda); }   /* mock .b-per */
.btn-perigo:hover { background: var(--sol-perigo-btn-fundo-hover); color: var(--sol-perigo-btn-hover); filter: none; }
.btn-txt { margin: 0; padding: 0; min-height: 0; background: none; border: 0; color: var(--sol-link); font-size: 14px; font-weight: 700; cursor: pointer; }
.btn-txt:hover { text-decoration: underline; filter: none; }
.btn-ico { margin: 0; padding: var(--e-1); display: inline-flex; background: transparent; color: var(--sol-perigo); border: 0; border-radius: 6px; }
.btn-ico:hover { background: var(--sol-perigo-fundo); filter: none; }
.btn-sm { padding: var(--e-1) 10px; font-size: 12px; font-weight: 600; width: auto; display: inline-flex; align-items: center; gap: var(--e-1);
          margin-top: 0; background: var(--sol-superficie); color: var(--sol-tinta); border: 1px solid var(--sol-borda-campo); border-radius: 6px; }
.btn-sm.excluir { background: var(--sol-perigo-fundo); color: var(--sol-perigo); border-color: color-mix(in srgb, var(--sol-perigo) 25%, var(--sol-superficie)); }
.btn-sm .ic { width: 14px; height: 14px; }
/* "Copiar link" depois de copiar: vira "Copiado ✓" por 2 s (marcarCopiado). */
.btn.copiado, .btn-sm.copiado { background: var(--sol-ok-fundo); color: var(--sol-ok-tinta); border-color: var(--sol-ok); }

.aviso { min-height: 18px; font-size: 13px; color: var(--sol-erro); font-weight: 600; margin: var(--e-2) 0 0; }

/* --- Chips de status --- */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; background: var(--sol-neutro); color: var(--sol-rotulo);
        font-size: 12px; font-weight: 700; white-space: nowrap; vertical-align: 1px; }
.chip-ok { background: var(--sol-ok-fundo); color: var(--sol-ok-tinta); }
.chip-aviso { background: var(--sol-aviso-fundo); color: var(--sol-aviso-tinta); }
.chip-erro { background: var(--sol-perigo-fundo); color: var(--sol-perigo); }
.chip-escuro { background: var(--sol-primaria); color: var(--sol-superficie); }
.chip-sol { background: var(--sol-acao); color: var(--sol-acao-tinta); }

/* --- Seletor segmentado (seg do gera.py) --- */
.seg { display: flex; gap: var(--e-1); padding: var(--e-1); background: var(--sol-neutro); border-radius: var(--raio); }
/* R7.5: 44px de toque (o mock tinha 40) e texto em duas linhas quando não cabe. */
.seg button { flex: 1; min-height: 44px; margin: 0; padding: var(--e-1) var(--e-3); border: 0; border-radius: 6px; background: transparent; color: var(--sol-tinta-2); font-size: 14px; font-weight: 500; line-height: 1.2; }
.seg button[aria-pressed="true"], .seg button[aria-checked="true"] { background: var(--sol-superficie); color: var(--sol-tinta); font-weight: 700; box-shadow: 0 1px 2px rgba(14, 31, 43, .15); }
/* R7.5: tipo de ligação, os 4 casos do custo de disponibilidade; 2 x 2 abaixo de 600 px. */
.fluxo-ligacao { margin-bottom: var(--e-3); }
.seg-ligacao { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.seg-sub { display: block; font-size: 12px; font-weight: 500; }
@media (max-width: 599px) {
    .seg-ligacao { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Tabela: cabeçalho 13px/600, divisória #EEF0EC, número à direita --- */
table { border-collapse: collapse; background: var(--sol-superficie); width: 100%; font-size: 14px; }
th, td { padding: 12px 14px; text-align: left; vertical-align: middle; }
th { position: sticky; top: 0; z-index: 1; padding-top: 11px; padding-bottom: 11px; background: var(--sol-fundo-2); color: var(--sol-rotulo);
     font-size: 13px; font-weight: 600; white-space: nowrap; border-bottom: 1px solid var(--sol-linha); }
td { border-bottom: 1px solid var(--sol-neutro); }
tbody tr:last-child td { border-bottom: 0; }
th.num, td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* --- Cartão de indicador --- */
.kpi { padding: 18px 20px; background: var(--sol-superficie); border: 1px solid var(--sol-linha); border-radius: var(--raio-g); }
.kpi-rotulo { margin: 0; font-size: 13px; font-weight: 600; color: var(--sol-tinta-2); }
.kpi-valor { margin: 6px 0 0; font-size: 28px; font-weight: 800; letter-spacing: -.3px; }
.kpi-sub { margin: 2px 0 0; font-size: 13px; color: var(--sol-tinta-2); }
.kpi-escuro { background: var(--sol-primaria); border-color: transparent; color: var(--sol-superficie); }
.kpi-escuro .kpi-rotulo { color: var(--sol-topo-texto); }
.kpi-escuro .kpi-sub { color: var(--sol-acao); }
/* R9.3: os valores verde e âmbar do Funil (mock crm.html, tela 3) */
.kpi-verde .kpi-valor { color: var(--sol-ok-tinta); }
.kpi-ambar .kpi-valor { color: var(--sol-aviso-tinta); }

/* --- Abas --- */
.tab-pane { display: none; animation: fadeIn 0.25s forwards; width: 100%; }
.tab-pane.active { display: block; }
@keyframes fadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }

/* --- Cartões: o card() do gera.py (branco, borda, raio 12, h2 de 16px) --- */
.card {
    background: var(--sol-superficie);
    color: var(--sol-tinta);
    border: 1px solid var(--sol-linha);
    border-radius: var(--raio-g);
    padding: 22px var(--e-5);
    margin-bottom: var(--e-5);
}
.card-titulo { margin: 0 0 var(--e-4); font-size: 16px; font-weight: 700; }
.card-corpo { padding: 0; }
.card-nota { margin: var(--e-2) 0 0; font-size: 12px; color: var(--sol-tinta-2); }
/* Modal da visita técnica: o cartão do título ficou sem padding próprio. */
.modal-caixa { padding: 22px var(--e-5); }

/* --- Listas renderizadas pelo JS --- */
.linha { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--sol-neutro); }
.linha:last-child { border-bottom: 0; }
.linha:hover { background: var(--sol-fundo); }
.linha-col { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.linha-corpo { flex: 1; min-width: 0; }
.linha-titulo { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha-sub { font-size: 12px; color: var(--sol-ok); font-weight: 600; }
.fraco, .linha-fraca { color: var(--sol-tinta-2); font-weight: 500; }
.linha-acoes { display: flex; gap: var(--e-1); flex-shrink: 0; }
/* Linha achada pela busca do header (destacarBusca). */
.linha.destaque { background: var(--sol-acao-suave); box-shadow: inset 3px 0 0 var(--sol-acao); }
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--sol-acao-suave);
    color: var(--sol-acao-tinta);
    font-size: 12px;
    font-weight: 700;
}

/* --- Painel (aba Início) --- */
.faixa-passos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-5);
    flex-wrap: wrap;
    padding: var(--e-5) 28px;
    margin-bottom: var(--e-5);
    background: var(--sol-primaria);
    color: var(--sol-superficie);
    border-radius: var(--raio-g);
}
.faixa-passos h3 { font-size: 18px; color: var(--sol-superficie); margin-bottom: var(--e-3); }
.passos { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0; padding: 0; list-style: none; counter-reset: passo; }
.passos li {
    counter-increment: passo;
    display: flex;
    align-items: center;
    gap: var(--e-2);
    padding: 6px 14px 6px 6px;
    background: var(--sol-topo-2);
    color: var(--sol-superficie);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}
.passos li::before {
    content: counter(passo);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--sol-acao);
    color: var(--sol-acao-tinta);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
}
[data-acao="comecar"] { margin: 0; padding: var(--e-3) var(--e-5); font-weight: 700; font-size: 15px; flex-shrink: 0; }

.painel-grade { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--e-5); align-items: start; }
.painel-grade .card { margin-bottom: 0; }
.painel-grade .card-corpo { padding: var(--e-2) 0; }
@media (max-width: 960px) {
    .painel-grade { grid-template-columns: minmax(0, 1fr); }
}
/* R7.2: saudação, indicadores e "Continue de onde parou" do mock (Main.dc.html 48-90). */
.painel-cabeca { margin-bottom: var(--e-5); }
.painel-data { margin: 0; font-size: 14px; color: var(--sol-tinta-2); }
.painel-saudacao { margin: 4px 0 0; font-size: 28px; font-weight: 800; letter-spacing: -.5px; }
.painel-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-4); margin-bottom: var(--e-5); }
.kpi-sub.kpi-ok { color: var(--sol-ok); font-weight: 600; }
.card-cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-2); }
.card-cabeca .card-titulo { margin: 0; }
.painel-vertodas { min-height: 44px; display: inline-flex; align-items: center; }
/* A tabela rola dentro do cartão: a 390 px ela não alarga a página (K10). */
.tabela-rolavel { overflow-x: auto; }
.painel-cliente { font-weight: 600; }
.painel-acao { text-align: right; }
.painel-acao .btn { margin: 0; }
/* R7.2 (pedido do usuário nas telas): abaixo de 600 px a tabela vira blocos empilhados, sem rolagem lateral --
   cliente em cima, sistema/valor/situação embaixo, PDF à direita do cliente. O contêiner rolável fica para as
   larguras em que a tabela inteira não cabe no cartão (601-700 px e o desktop estreito). */
@media (max-width: 600px) {
    .painel-tabela, .painel-tabela tbody { display: block; }
    .painel-tabela thead { display: none; }
    .painel-tabela tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--sol-neutro); }
    .painel-tabela tbody tr:last-child { border-bottom: 0; }
    .painel-tabela td { padding: 0; border: 0; }
    .painel-tabela .painel-cliente { flex: 1 1 calc(100% - 120px); min-width: 0; order: 0; }
    .painel-tabela .painel-acao { order: 1; }
    .painel-tabela td:not(.painel-cliente):not(.painel-acao) { order: 2; }
}
@media (max-width: 700px) {
    .painel-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
    .painel-kpis .kpi { padding: 14px 16px; }
    .painel-kpis .kpi-valor { font-size: 22px; }
}


/* --- Estados da lista (mock): vazio com ícone, esqueleto no lugar do spinner, erro com
   "Tentar de novo". O esqueleto mantém a classe .loader: é o contrato com o medidor. --- */
.vazio { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; padding: 28px var(--e-4); text-align: center; color: var(--sol-tinta-2); font-size: 14px;
         border: 1px solid var(--sol-neutro); border-radius: 10px; background: var(--sol-fundo-2); }   /* mock estado() */
.vazio > .ic { width: 52px; height: 52px; padding: 14px; border-radius: 50%; background: var(--sol-neutro); color: var(--sol-rotulo); }
.erro-carga { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; padding: 28px var(--e-4); text-align: center; color: var(--sol-tinta-2); font-size: 14px;
              border: 1px solid var(--sol-neutro); border-radius: 10px; background: var(--sol-fundo-2); }   /* mock estado() */
.erro-carga > .ic { width: 52px; height: 52px; padding: 14px; border-radius: 50%; background: var(--sol-perigo-fundo); color: var(--sol-perigo); }
.erro-carga strong { font-size: 15px; color: var(--sol-tinta); }
.erro-carga .btn { margin: var(--e-1) 0 0; }
.loader { display: flex; flex-direction: column; gap: 10px; padding: var(--e-4) 0; }
.sk { display: block; height: 14px; border-radius: 6px; background: var(--sol-neutro); }
.loader .sk:nth-child(1) { width: 72%; }
.loader .sk:nth-child(2) { width: 88%; }
.loader .sk:nth-child(3) { width: 56%; }
@media (prefers-reduced-motion: no-preference) { .sk { animation: pulsa 1.4s ease-in-out infinite; } }
@keyframes pulsa { 50% { opacity: .5; } }

/* --- Toast: canto inferior direito, some em 5 s (substitui o alerta nativo) --- */
.toasts { position: fixed; right: var(--e-5); bottom: var(--e-5); z-index: 1000; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 32px)); }
.toast {
    --cor: var(--sol-perigo);
    --cor-fundo: var(--sol-perigo-fundo);
    display: flex;
    align-items: flex-start;
    gap: var(--e-3);
    padding: 14px var(--e-4);
    background: var(--sol-superficie);
    color: var(--sol-tinta);
    border: 1px solid var(--sol-linha);
    border-left: 4px solid var(--cor);
    border-radius: 10px;
    box-shadow: var(--sombra-toast);
}
.toast-ok { --cor: var(--sol-ok); --cor-fundo: var(--sol-ok-fundo); }
.toast-aviso { --cor: var(--sol-aviso-tinta); --cor-fundo: var(--sol-aviso-fundo); }
.toast-ic { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--cor-fundo); color: var(--cor); }
.toast-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.toast-txt strong { font-size: 14px; }
.toast-txt span { font-size: 13px; color: var(--sol-tinta-2); overflow-wrap: anywhere; user-select: all; }
.toast-fechar { margin: 0; padding: 2px; display: flex; background: transparent; color: var(--sol-tinta-2); border: 0; }
.toast-fechar:hover { color: var(--sol-tinta); filter: none; }
@media (max-width: 760px) { .toasts { right: var(--e-4); bottom: var(--e-4); } }

/* --- Modal de confirmação: cobre a tela toda, inclusive o header --- */
.modal-fundo { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: var(--e-4); background: rgba(14, 31, 43, .45); }
.modal { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: var(--e-3); padding: 22px var(--e-5); background: var(--sol-superficie); color: var(--sol-tinta); border-radius: var(--raio-g); box-shadow: var(--sombra-modal); }
.modal-ic { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--sol-perigo-fundo); color: var(--sol-perigo); }
.modal h3 { margin: 0; font-size: 18px; font-weight: 800; }
.modal p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--sol-rotulo); overflow-wrap: anywhere; }
.modal-acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.modal-acoes .btn { margin: 0; }
/* R9.7: bloqueio de avanço do Funil (lista do que falta, vinda do servidor) */
.modal-lista { margin: 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; color: var(--sol-tinta); overflow-wrap: anywhere; }
.modal .modal-nota { font-size: 13px; color: var(--sol-tinta-2); }
/* R9.6: modal do motivo da perda (8 radios do servidor, 40 px de toque) e a lista de perdidos do Funil */
.modal-opcoes { display: flex; flex-direction: column; gap: 2px; }
.modal-opcao { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 8px; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; }
.modal-opcao:hover { background: var(--sol-fundo); }
.modal-opcao input { accent-color: var(--sol-acao); width: 18px; height: 18px; margin: 0; }
.funil-toggle { margin: 0; }
.perdido-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.perdido-card { cursor: default; }
.perdido-acoes { display: flex; gap: 8px; margin-top: 4px; }
.perdido-acoes .btn { margin: 0; min-height: 40px; }
.perdido-vazio { text-align: center; padding: 40px 0; color: var(--sol-tinta-2); font-size: 14px; }

/* --- Kanban do funil --- */
/* R9.1: o board do mock. As 8 colunas do servidor SEMPRE numa linha (decisão do usuário, 28/09): abaixo
   de 8 x 180 px o board rola de lado dentro dele mesmo -- a página não rola -- e a coluna nunca fica
   estreita a ponto de partir palavra. O menu ⋯ é fixed (alternarMenuNegocio) para a caixa com
   rolagem não o cortar. */
.kanban-board { display: grid; grid-template-columns: repeat(8, minmax(180px, 1fr)); gap: 10px; align-items: start; overflow-x: auto; padding-bottom: var(--e-2); }
.kanban-board > :not(.kanban-column) { grid-column: 1 / -1; }   /* carregando, erro de carga e "sem etapas" */
.kanban-column { min-width: 0; display: flex; flex-direction: column; gap: var(--e-2); padding: 10px var(--e-2); background: var(--sol-neutro); border-radius: var(--raio-g); }
.kanban-column-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--e-1); padding: 0 var(--e-1) var(--e-1); font-size: 13px; font-weight: 800; color: var(--sol-tinta); }
.kanban-column-header .kanban-soma { flex: 1 1 100%; margin: 0; font-size: 13px; font-weight: 600; color: var(--sol-tinta-2); }   /* R9.3: a soma do servidor */
.kanban-column-header .badge { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--sol-superficie); color: var(--sol-rotulo); min-width: 22px; text-align: center; }
.kanban-column-body { display: flex; flex-direction: column; gap: var(--e-2); min-height: 48px; }
/* R9.2: o "+ Negócio" do pé da coluna (mock crm.html, tela 3) abre o painel com a etapa da coluna */
.kanban-novo { min-height: 44px; margin: 0; border: 1px dashed var(--sol-borda-campo); border-radius: 8px; background: transparent;
               color: var(--sol-tinta-2); font-size: 13px; font-weight: 700; }
.kanban-novo:hover { background: var(--sol-superficie); filter: none; }
/* No toque o cartão não arrasta (move por "⋯ > Mover para…"): o touch-action fica o padrão, e o dedo rola
   a página e o board para qualquer lado. */
.kanban-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--sol-superficie); border: 1px solid var(--sol-linha); border-radius: 10px; box-shadow: var(--sombra); cursor: grab; user-select: none; overflow-wrap: break-word; }
.kanban-card.arrastando { z-index: 20; pointer-events: none; cursor: grabbing; opacity: .92; box-shadow: var(--sombra-alta); }
.kanban-card .card-title { font-size: 13px; font-weight: 700; line-height: 1.3; padding-right: 22px; }
.negocio-cliente { font-size: 12px; line-height: 1.3; color: var(--sol-tinta-2); }
.negocio-valor { font-size: 15px; font-weight: 800; }
.kanban-card > .chip { align-self: flex-start; }   /* R9.3: o chip do prazo na largura do texto */
.negocio-acoes { position: absolute; top: 6px; right: 6px; }
.negocio-menu-btn { width: 28px; height: 28px; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; color: var(--sol-rotulo); }
.negocio-menu-btn:hover, .negocio-menu-btn[aria-expanded="true"] { background: var(--sol-neutro); filter: none; }
.negocio-menu { position: fixed; z-index: 30; width: 210px; max-height: calc(100vh - 16px); overflow-y: auto; display: flex; flex-direction: column; padding: 6px; background: var(--sol-superficie); border: 1px solid var(--sol-linha); border-radius: 10px; box-shadow: var(--sombra-alta); cursor: default; }
.negocio-menu[hidden], .negocio-mover[hidden] { display: none; }
.negocio-menu button { display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 0; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--sol-tinta); font-size: 14px; font-weight: 600; text-align: left; }
.negocio-menu button:hover, .negocio-menu button:focus-visible { background: var(--sol-fundo); filter: none; }
.negocio-menu .perigo { color: var(--sol-perigo); }
.negocio-mover { display: flex; flex-direction: column; margin: 0 0 var(--e-1) var(--e-5); border-left: 2px solid var(--sol-linha); }

/* --- Combobox (combobox.js) e opções de kit --- */
.combo-opt, .combo-free { padding: 9px 12px; cursor: pointer; font-size: 14px; }
.combo-opt { border-bottom: 1px solid var(--sol-neutro); }
.combo-free { color: var(--sol-link); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.combo-vazio { padding: 12px; color: var(--sol-tinta-2); font-size: 14px; text-align: center; }
.combo-opt:hover, .combo-free:hover { background: var(--sol-fundo); }
.combo-opt.combo-ativa { background: var(--sol-acao-suave); }
.solar-opcao-check { accent-color: var(--sol-acao); }
/* R7.6: passo 3. A faixa do dimensionamento (kWp alvo e nº de módulos) e os cartões de kit: o cartão inteiro é o
   <label> do checkbox, e o marcado ganha a borda âmbar. */
.dim-faixa { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-6); margin: var(--e-3) 0; padding: var(--e-4) var(--e-5);
             background: var(--sol-primaria); border-radius: var(--raio-g); }
.dim-faixa p { margin: 0; font-size: 13px; font-weight: 600; color: var(--sol-topo-texto); }
.dim-faixa strong { display: block; margin-top: 2px; font-size: 24px; font-weight: 800; color: var(--sol-superficie); }
.kit-opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--e-3); margin-top: var(--e-3); }
.kit-opcao { display: block; min-width: 0; margin: 0; padding: 14px; font-size: 14px; font-weight: 400; color: var(--sol-tinta); cursor: pointer; }
.kit-opcao:has(.solar-opcao-check:checked) { border-color: var(--sol-acao); box-shadow: 0 0 0 1px var(--sol-acao); }
.kit-opcao > span, .kit-opcao-fatura > span { display: block; }
.kit-opcao > .kit-opcao-topo { display: flex; align-items: center; gap: var(--e-2); }
.kit-opcao-topo .solar-opcao-check { width: 20px; height: 20px; margin: 0; }
.kit-opcao-rotulo { font-size: 12px; font-weight: 700; color: var(--sol-primaria); text-transform: uppercase; }

/* --- Fluxo "Nova proposta" em 5 passos (fatia R2b) --- */
/* O atributo hidden tem de vencer display de classe (.btn é inline-flex). */
[hidden] { display: none !important; }

.fluxo-passos { display: flex; gap: var(--e-2); margin: 0 0 var(--e-5); padding: 0; list-style: none; }
.fluxo-passos li {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--e-2);
    font-size: 13px;
    font-weight: 600;
    color: var(--sol-tinta-2);
}
.fluxo-passos li:not(:last-child)::after { content: ""; flex: 1; min-width: var(--e-3); height: 2px; background: var(--sol-linha); }
.fluxo-passos li.feito:not(:last-child)::after { background: var(--sol-ok); }
.fluxo-num {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid var(--sol-borda-campo);
    background: var(--sol-superficie);
    color: var(--sol-tinta-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
}
.fluxo-rotulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fluxo-passos li.atual { color: var(--sol-tinta); }
.fluxo-passos li.atual .fluxo-num { background: var(--sol-acao); border-color: var(--sol-acao); color: var(--sol-acao-tinta); }
.fluxo-passos li.feito { color: var(--sol-tinta); }
/* R7.3: passo feito troca o número pelo svg.ic do check (o número fica no DOM, escondido). */
.fluxo-passos li.feito .fluxo-num { background: var(--sol-ok); border-color: var(--sol-ok); color: var(--sol-superficie); }
.fluxo-num .ic { display: none; }
.fluxo-passos li.feito .fluxo-n { display: none; }
.fluxo-passos li.feito .fluxo-num .ic { display: block; }
/* R7.3: cada passo é um botão sem cara de botão; o futuro fica disabled com a cor do mock (sem o .45 global). */
.fluxo-passos button { display: flex; align-items: center; gap: var(--e-2); min-width: 0; min-height: 44px; margin: 0; padding: 0;
    border: 0; background: none; color: inherit; font: inherit; text-align: left; }
.fluxo-passos button:disabled { opacity: 1; }
/* R7.3: a trilha "Propostas / Nova proposta · <cliente>" e a grade 2/3 + 1/3 do passo 1. */
.fluxo-trilha { display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--e-2); margin: 0 0 var(--e-3); font-size: 13px; color: var(--sol-tinta-2); }
.fluxo-trilha-link { min-height: 44px; font-size: 13px; font-weight: 600; color: var(--sol-tinta-2); }
.fluxo-trilha-atual { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0; color: var(--sol-tinta); overflow-wrap: anywhere; }
.fluxo-grade { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--e-4); align-items: start; }
.fluxo-grade .card { margin-bottom: 0; }
@media (max-width: 599px) {
    .fluxo-grade { grid-template-columns: minmax(0, 1fr); }
}
/* Celular: só os números (o título de cada passo já diz onde se está). */
@media (max-width: 760px) {
    .fluxo-passos .fluxo-rotulo { display: none; }
}

/* Sem overflow:hidden (o .card-blocos tem): ele mataria o sticky do rodapé e
   cortaria o painel absoluto dos comboboxes. */
.fluxo {
    background: var(--sol-superficie);
    border: 1px solid var(--sol-linha);
    border-radius: var(--raio-g);
    box-shadow: var(--sombra);
    margin-bottom: var(--e-5);
}
.fluxo-passo { padding: var(--e-5); }
.fluxo-titulo { margin: 0 0 var(--e-4); }
.fluxo-linha { display: flex; gap: var(--e-3); align-items: flex-end; flex-wrap: wrap; margin-bottom: var(--e-3); }
.fluxo-linha .btn { margin: 0; }
.fluxo-passo .card { box-shadow: none; }
.fluxo-msg { min-height: 20px; margin: var(--e-3) 0 0; font-size: 13px; font-weight: 600; color: var(--sol-erro); }
.fluxo-msg.ok { color: var(--sol-ok); }
/* Card #174-F: as UCs do cliente no passo 2, uma por opção de rádio nativo, com toque de 44 px. */
.fluxo-ucs-lista { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-1) 0 var(--e-3); }
.fluxo-uc-opcao { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 44px; padding: 0 var(--e-3); border: 1px solid var(--sol-linha); border-radius: 8px; color: var(--sol-tinta); font-size: 14px; cursor: pointer; }
.fluxo-uc-opcao input { width: 18px; height: 18px; margin: 0; }
.fluxo-extra { margin-top: var(--e-5); }
.fluxo-extra summary { cursor: pointer; font-weight: 600; color: var(--sol-tinta); padding: var(--e-2) 0; }
.fluxo-extra[open] summary { margin-bottom: var(--e-3); }
.fluxo-resumo { display: grid; gap: var(--e-2); max-width: 640px; margin-bottom: var(--e-4); }
.fluxo-resumo-linha { display: flex; justify-content: space-between; gap: var(--e-4); padding: var(--e-2) 0; border-bottom: 1px solid var(--sol-linha); }
.fluxo-resumo-linha span { color: var(--sol-tinta-2); }
.fluxo-resumo-linha ul { margin: 0; padding: 0; list-style: none; text-align: right; font-weight: 700; }
.fluxo-salva { margin: 0 0 var(--e-4); font-size: 16px; font-weight: 700; color: var(--sol-ok); }
/* R7.7: o cartão "Resumo" do passo 4 e os ladrilhos "Entregar a proposta" do passo 5 (mock gera.py: situ e acao()). */
.fluxo-resumo-card { margin: 0; }
.fluxo-resumo-total { border-bottom: 0; }
.fluxo-resumo-total strong { font-size: 18px; font-weight: 800; }
.fluxo-resumo-linha > strong { white-space: nowrap; } /* R7.7: a 390 o "R$" caía numa linha e o número noutra; o rótulo pode quebrar */
.fluxo-editar { display: inline-flex; align-items: center; min-height: 44px; }
.fluxo-entrega { margin: 0; }
.ladrilhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.ladrilho { display: flex; align-items: center; gap: 14px; min-width: 0; min-height: 44px; margin: 0; padding: 16px 18px; text-align: left;
            background: var(--sol-superficie); color: var(--sol-tinta); border: 1px solid var(--sol-borda-campo); border-radius: var(--raio-g); }
.ladrilho:hover { border-color: var(--sol-link); filter: none; }
.ladrilho > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ladrilho strong { font-size: 15px; font-weight: 800; }
.ladrilho small { font-size: 13px; font-weight: 400; color: var(--sol-tinta-2); overflow-wrap: anywhere; }
.ladrilho-principal { background: var(--sol-primaria); color: var(--sol-superficie); border-color: transparent; }
.ladrilho-principal .ic { color: var(--sol-acao); }
.ladrilho-principal small { color: var(--sol-topo-texto); }
.ladrilho.copiado { background: var(--sol-ok-fundo); color: var(--sol-ok-tinta); border-color: var(--sol-ok); }

.fluxo-rodape {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-3) var(--e-5);
    background: var(--sol-superficie);
    border-top: 1px solid var(--sol-linha);
    border-radius: 0 0 var(--raio-g) var(--raio-g);
}
.fluxo-rodape .btn { margin: 0; }
.fluxo-status { flex: 1; text-align: center; font-size: 13px; color: var(--sol-tinta-2); }
#fluxoAvancar { background: var(--sol-primaria); color: var(--sol-superficie); border-color: transparent; font-weight: 700; }
#fluxoVoltar[hidden] + .fluxo-status { text-align: left; }
@media (max-width: 760px) {
    .fluxo-passo { padding: var(--e-4); }
    .fluxo-rodape { padding: var(--e-3) var(--e-4); }
    .fluxo-status { display: none; }
    #fluxoAvancar { margin-left: auto; white-space: normal; text-align: center; }
}

/* Gráfico do histórico da conta (12 meses) */
.conta-historico { margin: var(--e-4) 0; }
.conta-historico:empty { display: none; }
.conta-historico h5 { margin: 0 0 var(--e-2); }
.conta-historico-barras { display: flex; align-items: flex-end; gap: var(--e-1); height: 128px; max-width: 640px; }
.conta-historico-mes {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
    height: 100%;
    font-size: 11px;
    font-weight: 600;
    color: var(--sol-tinta);
}
.conta-historico-mes.sem-valor { color: var(--sol-tinta-2); }
.conta-historico-barra { width: 100%; max-width: 36px; background: var(--sol-primaria); border-radius: 4px 4px 0 0; }
.conta-historico-media { margin: var(--e-2) 0 0; font-size: 13px; font-weight: 600; }

/* --- R8.1: aba Clientes (mock crm.html, telas 1 e 2): tabela, páginas e o painel lateral <dialog> --- */
.cli-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap; }
.cli-topo .btn { margin: 0; }
/* R9.4: filtros do Funil no topo (Vendedor e Período + o botão); a 390px cada um ocupa a linha. */
.funil-filtros { display: flex; align-items: flex-end; gap: var(--e-3); flex-wrap: wrap; }
.funil-filtro { display: flex; flex-direction: column; margin: 0; }
.funil-filtro select { width: 210px; }
.funil-filtro select:disabled { opacity: .6; }
@media (max-width: 600px) { .funil-filtros, .funil-filtro, .funil-filtro select { width: 100%; } }
.cli-tabela { border: 1px solid var(--sol-linha); border-radius: 10px; overflow: hidden; }
.cli-tabela th { font-size: 12px; font-weight: 700; color: var(--sol-tinta-2); text-transform: uppercase; letter-spacing: .3px; }
.cli-tabela td { padding: var(--e-1) var(--e-4); }
.cli-nome { display: flex; align-items: center; gap: 10px; }
.cli-ultima { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cli-ultima > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.cli-ultima small { font-size: 13px; color: var(--sol-tinta-2); }
/* Ações e páginas com 44px de alvo (o mock tem 36px nas páginas; vale a regra de toque). */
.cli-acoes { white-space: nowrap; }
.cli-acoes .btn-txt { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--e-1); font-size: 13px; text-decoration: none; }
.cli-acoes > * + * { margin-left: var(--e-2); }
/* Linha achada pela busca do header (destacarBusca): o .linha.destaque, na tabela. */
tr.destaque td { background: var(--sol-acao-suave); }
tr.destaque td:first-child { box-shadow: inset 3px 0 0 var(--sol-acao); }
.cli-paginacao { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); flex-wrap: wrap; margin-top: var(--e-4); font-size: 13px; color: var(--sol-tinta-2); }
.cli-paginas { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cli-paginas button { margin: 0; min-width: 44px; height: 44px; padding: 0 10px; border: 1px solid var(--sol-borda-campo); border-radius: var(--raio);
                      background: var(--sol-superficie); color: var(--sol-tinta); font-size: 14px; font-weight: 700; }
.cli-paginas button[aria-current="page"] { background: var(--sol-primaria); color: var(--sol-superficie); border-color: transparent; }

.painel-lateral { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(720px, 100%); max-width: 100%; height: 100%; max-height: 100%;
                  padding: 0; border: 0; background: var(--sol-fundo); color: var(--sol-tinta); box-shadow: -16px 0 40px rgba(14, 31, 43, .28); }
.painel-lateral[open] { display: flex; flex-direction: column; }
.painel-lateral::backdrop { background: rgba(14, 31, 43, .55); }
.painel-topo { flex-shrink: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e-4); padding: 20px 28px;
               background: var(--sol-superficie); border-bottom: 1px solid var(--sol-linha); }
.painel-topo h2 { margin: 0; font-size: 20px; font-weight: 800; }
.painel-topo p { margin: var(--e-1) 0 0; font-size: 13px; color: var(--sol-tinta-2); overflow-wrap: anywhere; }
.painel-fechar { flex-shrink: 0; width: 44px; height: 44px; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center;
                 background: var(--sol-superficie); color: var(--sol-rotulo); border: 1px solid var(--sol-linha); }
.painel-corpo { flex: 1; overflow-y: auto; padding: var(--e-5) 28px; }
.painel-corpo .card { margin-bottom: var(--e-4); }
.painel-corpo p.form-label { margin: 0 0 6px; }
.painel-rodape { flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); padding: var(--e-4) 28px;
                 background: var(--sol-superficie); border-top: 1px solid var(--sol-linha); }
.painel-rodape .btn { margin: 0; }
.cli-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-3) var(--e-4); margin-top: var(--e-4); }
.cli-grade > div { min-width: 0; }
.cli-grade .cli-2 { grid-column: span 2; }
.cli-grade .cli-4 { grid-column: 1 / -1; }   /* R9.2: a linha inteira no painel do negócio */
.neg-vendedor { display: flex; align-items: center; min-height: 44px; color: var(--sol-tinta); overflow-wrap: anywhere; }   /* R9.2: texto, não campo */
.cli-lgpd { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: var(--e-2); font-weight: 500; color: var(--sol-tinta); }
.cli-lgpd input { flex-shrink: 0; width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--sol-primaria); }

/* Até 760px a tabela vira cartões (uma linha por cliente, o rótulo antes do valor) e o painel ocupa a tela. */
@media (max-width: 760px) {
    .cli-tabela { border: 0; border-radius: 0; overflow: visible; }
    .cli-tabela thead { display: none; }
    .cli-tabela table, .cli-tabela tbody, .cli-tabela tr, .cli-tabela td { display: block; width: 100%; }
    .cli-tabela tr { padding: var(--e-3) 0; border-bottom: 1px solid var(--sol-linha); }
    .cli-tabela td { padding: 2px 0; border: 0; overflow-wrap: anywhere; }
    .cli-tabela td[data-rotulo]::before { content: attr(data-rotulo) ": "; font-size: 13px; font-weight: 600; color: var(--sol-tinta-2); }
    .cli-tabela td[data-rotulo="Nome"]::before { content: none; }
    .cli-acoes { white-space: normal; }
    .cli-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .painel-topo, .painel-corpo, .painel-rodape { padding-left: var(--e-4); padding-right: var(--e-4); }
}

/* --- R8.2: a Ficha do cliente (mock crm.html, tela 2b): abas do painel, números do cliente, propostas e negócios --- */
.cli-abas { flex-shrink: 0; display: flex; gap: 22px; padding: 0 28px; background: var(--sol-superficie); border-bottom: 1px solid var(--sol-linha); }
.cli-abas button { margin: 0; min-height: 44px; padding: 0 4px; background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0;
                   color: var(--sol-tinta-2); font-size: 14px; font-weight: 500; }
.cli-abas button[aria-current="page"] { color: var(--sol-tinta); font-weight: 700; border-bottom-color: var(--sol-acao); }
/* O nome na tabela abre a ficha: é botão, mas lê como o texto da linha. */
.cli-abrir { margin: 0; padding: 0; min-height: 44px; background: none; border: 0; color: inherit; font: inherit; text-align: left; overflow-wrap: anywhere; }
.cli-abrir:hover strong { text-decoration: underline; }
.cli-minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--e-3); margin-bottom: var(--e-4); }
.cli-mini { padding: 14px 16px; background: var(--sol-superficie); border: 1px solid var(--sol-linha); border-radius: 12px; min-width: 0; }
.cli-mini p { margin: 0; font-size: 12px; font-weight: 600; color: var(--sol-tinta-2); }
.cli-mini .cli-mini-valor { margin-top: 4px; font-size: 20px; font-weight: 800; color: var(--sol-tinta); }
.cli-mini .cli-mini-nota { margin-top: 4px; font-weight: 500; }
.cli-mini-escuro { background: var(--sol-primaria); border-color: transparent; }
.cli-mini-escuro p, .cli-mini-escuro .fraco { color: var(--sol-topo-texto); }
.cli-mini-escuro .cli-mini-valor { color: var(--sol-superficie); }
.cli-ficha-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 var(--e-4); }
.cli-ficha-linha { grid-column: 1 / -1; }   /* 182-F: a linha do tempo ocupa a largura toda da grade */
.cli-itens { margin: -4px 0 0; padding: 0; list-style: none; }
.cli-itens li { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); padding: var(--e-3) 0; border-top: 1px solid var(--sol-neutro); font-size: 14px; }
.cli-item-esq { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.cli-item-esq small { font-size: 13px; color: var(--sol-tinta-2); }
.cli-item-dir { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) { .cli-abas { padding: 0 var(--e-4); } }

/* R10.1: o filtro de status das Instalações. Largo, ao lado da busca e da equipe; até 600 px, numa linha própria acima
   delas, com os 5 botões numa linha só e a rolagem lateral dentro do controle (molde do board do Funil, R9.1): a
   página não rola de lado. */
.os-status { flex: 3; min-width: 0; }
.os-status .seg { flex-wrap: wrap; }
@media (max-width: 600px) {
    .os-status { flex: 1 1 100%; }
    .os-status .seg { flex-wrap: nowrap; overflow-x: auto; }
    .os-status .seg button { flex: 0 0 auto; white-space: nowrap; }
}

/* --- Card #184b: selo elétrico do kit (passo 3). Cores só por token; o chip é o .chip dos status --- */
.kit-bloco { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
.ajuda { margin: 4px 0 0; font-size: 12px; color: var(--sol-rotulo); }
.serie { padding: 10px 12px; background: var(--sol-neutro); border-radius: var(--raio); }
.serie-linha { display: flex; gap: var(--e-2); align-items: center; flex-wrap: wrap; margin-top: 6px; }
.serie .form-control { width: 90px; }
.serie .btn { margin: 0; min-height: 38px; }
.serie .ajuda { margin-top: 6px; }
.selo { padding: 10px 12px; background: var(--sol-superficie); border: 1px solid var(--sol-linha); border-radius: var(--raio); }
.selo summary { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-2); list-style: none; cursor: pointer; }
.selo summary::-webkit-details-marker { display: none; }
.selo-titulo { font-size: 12px; font-weight: 600; }
.selo .mais { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--sol-link); }
.selo[open] .mais { display: none; }
.v { display: grid; grid-template-columns: 22px 1fr; gap: 2px 8px; padding: 8px 0; border-top: 1px solid var(--sol-linha); font-size: 12px; }
.v b { font-size: 13px; }
.v .msg { grid-column: 2; color: var(--sol-rotulo); }
.v .ic-s { font-weight: 800; text-align: center; }
.v.ok .ic-s { color: var(--sol-ok); }
.v.alerta .ic-s { color: var(--sol-aviso); }
.v.erro .ic-s { color: var(--sol-perigo); }
.v.indisponivel .ic-s { color: var(--sol-rotulo); }
.v.erro, .v.alerta { margin: 0 -12px; padding: 8px 12px; border-left: 4px solid var(--sol-perigo); background: var(--sol-perigo-fundo); }
.v.alerta { border-left-color: var(--sol-aviso); background: var(--sol-aviso-fundo); }
.v.indisponivel b { color: var(--sol-rotulo); }

/* --- R9.5: modal da visita técnica (mock crm.html, tela 5): <dialog> central de 920 px, 4 seg, fotos por categoria --- */
.modal-visita { width: min(920px, calc(100% - 32px)); max-width: none; max-height: calc(100% - 80px); padding: 0; border: 0; border-radius: 16px; overflow: hidden;
                background: var(--sol-fundo); color: var(--sol-tinta); box-shadow: 0 24px 60px rgba(14, 31, 43, .35); }
.modal-visita[open] { display: flex; flex-direction: column; }
.modal-visita::backdrop { background: rgba(14, 31, 43, .55); }
.visita-segs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
.visita-segs > div { min-width: 0; }
.visita-segs .form-label { display: block; margin-bottom: 6px; }
.seg-visita { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
.visita-fotos-bloco { margin-top: var(--e-4); }
.visita-fotos-bloco > .form-label { display: block; margin-bottom: 6px; }
.visita-galeria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
.visita-area { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 2px dashed var(--sol-traco); border-radius: 12px; background: var(--sol-fundo-2); }
.visita-area-topo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-2); }
.visita-area-nome { font-size: 14px; font-weight: 700; }
.visita-area-n { font-size: 12px; font-weight: 600; color: var(--sol-tinta-2); font-variant-numeric: tabular-nums; }
.visita-area-n.tem { color: var(--sol-ok-tinta); }
.visita-fotos { display: flex; flex-wrap: wrap; gap: 8px; }
.visita-foto img { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--sol-linha); }
.visita-add { position: relative; width: 96px; height: 96px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
              border: 2px dashed var(--sol-traco); border-radius: 8px; background: var(--sol-superficie); font-size: 12px; font-weight: 700; color: var(--sol-rotulo); text-align: center; cursor: pointer; }
.visita-add:focus-within { outline: 2px solid var(--sol-acao); outline-offset: 2px; }
.visita-add input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.visita-msg { flex-shrink: 0; margin: 0; padding: var(--e-2) 28px 0; background: var(--sol-fundo); }   /* fora da rolagem: o aviso fica à vista junto do Salvar */
.visita-fotos-n { flex: 1; text-align: center; font-size: 13px; color: var(--sol-tinta-2); }
@media (max-width: 760px) {
    .modal-visita { width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
    .visita-segs, .visita-galeria { grid-template-columns: minmax(0, 1fr); }
    .visita-msg { padding-left: var(--e-4); padding-right: var(--e-4); }
}

/* --- S21b: financeiro da obra, modal do cartão (mock aprovado em 01/10) --- */
.modal-obra{width:min(900px,calc(100% - 32px))}.obra-tabela th,.obra-tabela td{padding:10px 8px}.obra-data{white-space:nowrap}.obra-desc{min-width:150px}
.obra-resumo{margin-bottom:var(--e-4)}.obra-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-5)}.obra-cols>div{min-width:0}
.obra-dl{margin:0}.obra-dl>div{display:flex;justify-content:space-between;align-items:center;gap:var(--e-3);padding:8px 0;border-bottom:1px solid var(--sol-neutro)}
.obra-dl>div:last-child{border-bottom:0}.obra-dl dt{font-size:14px;color:var(--sol-rotulo)}.obra-dl dd{margin:0;font-size:15px;font-weight:700;text-align:right;overflow-wrap:anywhere}
.obra-sem{margin:0;padding:14px;border:1px dashed var(--sol-traco);border-radius:10px;background:var(--sol-fundo-2);font-size:14px;color:var(--sol-tinta-2)}
.obra-form{margin-bottom:var(--e-4);padding:var(--e-4);border:1px solid var(--sol-linha);border-radius:12px;background:var(--sol-fundo-2)}.obra-form h4{margin:0 0 var(--e-3);font-size:15px}
.obra-form-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--e-4)}.obra-desc-g{grid-column:1/-1}
.obra-form-acoes{display:flex;justify-content:flex-end;gap:var(--e-2)}.obra-form-acoes .btn{margin:0}
.obra-acoes{text-align:right;white-space:nowrap}.obra-acoes .btn-sm{margin:0}.obra-desc{overflow-wrap:anywhere}
@media(max-width:600px){.modal-obra{width:calc(100% - 16px);max-height:calc(100% - 24px)}.painel-topo,.painel-rodape{padding-left:16px;padding-right:16px}.painel-corpo{padding:var(--e-4) 12px}
.obra-cols{grid-template-columns:1fr;gap:var(--e-4)}.obra-form-grade{grid-template-columns:1fr}
.obra-tabela,.obra-tabela tbody{display:block}.obra-tabela thead{display:none}
.obra-tabela tr{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--sol-neutro)}.obra-tabela tbody tr:last-child{border-bottom:0}
.obra-tabela td{padding:0;border:0}.obra-data{grid-column:1;font-size:13px;color:var(--sol-tinta-2)}.obra-tabela td:nth-child(2){grid-column:1;grid-row:2}
.obra-val{grid-column:2;grid-row:1/3}.obra-desc{grid-column:1/-1}.obra-acoes{grid-column:1/-1;text-align:left}.card{padding:18px var(--e-3)}}

/* --- S6b: formulários e listas de Clientes, Catálogo e Configurações --- */
.form-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--e-4); }
.form-grade .campo-largo { grid-column: 1 / -1; }
.form-acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.form-acoes .btn { margin: var(--e-2) 0 0; }
.form-acoes .btn + .btn { margin-left: 0; }
.check-linha { display: flex; gap: var(--e-3); align-items: flex-start; font-size: 14px; margin: var(--e-2) 0; }
.check-linha input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--sol-acao); }
.card-cabeca .btn { margin-top: 0; }
.barra-acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.barra-acoes .btn { margin: 0; }
.cat-corpo { margin-top: var(--e-3); }
.linha-acoes .btn-sm { margin: 0; }
.item-kit { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: var(--e-2); align-items: center; margin-bottom: var(--e-2); }
.item-kit .btn-ico { margin: 0; }
.uc-form { margin-top: var(--e-4); padding: var(--e-4); border: 1px solid var(--sol-linha); border-radius: var(--raio-g); background: var(--sol-fundo-2); }
.uc-form h3 { margin: 0 0 var(--e-3); font-size: 15px; }
.config-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5); align-items: start; }
.config-grade .card { margin-bottom: 0; }
.marca-previa { margin-bottom: var(--e-3); }
.logo-previa { max-width: 200px; max-height: 80px; object-fit: contain; display: block; }
input[type="color"].form-control { padding: 4px; width: 80px; }
@media (max-width: 960px) { .config-grade { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
    .form-grade { grid-template-columns: minmax(0, 1fr); }
    #solar_clientes .linha, #solar_catalogo .linha { flex-wrap: wrap; }
    #solar_clientes .linha-corpo, #solar_catalogo .linha-corpo { flex: 1 1 100%; }
    #solar_clientes .linha-acoes, #solar_catalogo .linha-acoes { margin-left: auto; }
}

/* --- S6c: Propostas (lista, detalhe, nova proposta e opções de kit) --- */
.prop-filtros { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 var(--e-4); }
.prop-sub { margin: var(--e-4) 0 var(--e-3); font-size: 15px; }
.prop-hist { margin: 0 0 var(--e-4); }
.prop-hist summary { cursor: pointer; font-weight: 600; font-size: 14px; margin-bottom: var(--e-3); }
.prop-meses { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.prop-resumo { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; margin: 0 0 var(--e-2); }
.prop-opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--e-4); margin-bottom: var(--e-5); }
.prop-opcao { background: var(--sol-superficie); border: 1px solid var(--sol-linha); border-radius: var(--raio-g); padding: var(--e-4); min-width: 0; }
.prop-opcao.aceita { border-color: var(--sol-ok); }
.prop-opcao header { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-2); }
.prop-opcao h3 { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.prop-preco { margin: var(--e-2) 0; font-size: 24px; font-weight: 800; }
.prop-metricas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); margin: var(--e-3) 0; }
.prop-metricas dt { font-size: 12px; color: var(--sol-tinta-2); }
.prop-metricas dd { margin: 0; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.prop-fatura { font-size: 13px; margin: var(--e-2) 0; }
.prop-selo, .prop-comp { margin: var(--e-2) 0; font-size: 13px; }
.prop-selo summary, .prop-comp summary { cursor: pointer; margin-top: var(--e-2); }
.prop-validacoes { list-style: none; margin: var(--e-2) 0 0; padding: 0; display: grid; gap: var(--e-2); }
.prop-escolher { display: flex; align-items: center; gap: var(--e-2); margin-top: var(--e-3); padding-top: var(--e-3); border-top: 1px solid var(--sol-linha); font-weight: 600; cursor: pointer; }
.prop-escolher input { width: 20px; height: 20px; margin: 0; accent-color: var(--sol-acao); }
.prop-link { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-3) 0 var(--e-2); }
.prop-link input { flex: 1 1 260px; min-width: 0; }
.prop-link .btn { margin: 0; }
#propLinkCorpo { margin-top: var(--e-3); }
@media (max-width: 600px) {
    .prop-filtros { grid-template-columns: minmax(0, 1fr); }
    .prop-meses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .prop-opcoes { grid-template-columns: minmax(0, 1fr); }
    #solar_propostas .linha { flex-wrap: wrap; }
    #solar_propostas .linha-corpo { flex: 1 1 100%; }
    #solar_propostas .linha-acoes { margin-left: auto; }
}

/* --- S6d: Funil, Visitas, Manutenção e Obra em páginas (não em modal): o que o CSS legado do elétrico não tinha --- */
.topo-menu button[hidden] { display: none; }
.funil-cabeca { flex-wrap: wrap; }
.funil-acoes { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.funil-acoes .btn { margin: 0; }
.funil-painel { margin: 0 0 var(--e-3); }
.funil-filtros { margin-bottom: var(--e-3); }
.funil-filtros .form-group { margin: 0; min-width: 210px; }
.kanban-column.alvo { outline: 2px dashed var(--sol-acao); outline-offset: -2px; }
.kanban-card.em-arraste { opacity: .45; }
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.timeline-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--e-3); padding: 10px 0 10px var(--e-4); border-left: 2px solid var(--sol-linha); position: relative; font-size: 14px; }
.timeline-item::before { content: ""; position: absolute; left: -6px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--sol-acao); }
.timeline-data { color: var(--sol-tinta-2); font-variant-numeric: tabular-nums; }
.timeline-titulo { font-weight: 600; overflow-wrap: anywhere; }
.obra-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); margin-top: var(--e-3); }
.sub-titulo { margin: var(--e-4) 0 var(--e-2); font-size: 15px; }
.linha-man .linha-titulo { white-space: normal; }
@media (max-width: 600px) {
    .obra-kpis { grid-template-columns: minmax(0, 1fr); }
    #solar_funil .painel-kpis .kpi-valor, #solar_manutencao .painel-kpis .kpi-valor, .obra-kpis .kpi-valor { font-size: 19px; }   /* 'R$ 97.500,00' em uma linha a 390 px */
    .timeline-item { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .funil-filtros .form-group { min-width: 0; width: 100%; }
    #solar_visitas .linha, #solar_manutencao .linha { flex-wrap: wrap; }
    #solar_visitas .linha-corpo, #solar_manutencao .linha-corpo { flex: 1 1 100%; }
    #solar_visitas .linha-acoes, #solar_manutencao .linha-acoes { margin-left: auto; }
}
#funilTopo .card-nota { margin-bottom: var(--e-3); }

/* --- S6h: cadastro público, confirmação de e-mail, aba Assinatura e aviso global --- */
a.btn { text-decoration: none; }
.caixa a.login-criar { margin: 0; }
.estado-icone { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.estado-ok { background: var(--sol-ok-fundo); color: var(--sol-ok-tinta); }
.estado-erro { background: var(--sol-perigo-fundo); color: var(--sol-perigo); }
.caixa button[type="submit"], #btnConfirmar { height: 48px; margin: 0; border-radius: 10px; background: var(--sol-acao); color: var(--sol-acao-tinta); font-size: 15px; font-weight: 800; }
#btnConfirmar { width: 100%; }

/* Faixa global abaixo do topo: o texto vem do servidor/assinatura.js; o botão leva à aba Assinatura. */
.faixa-assin { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-7); background: var(--sol-aviso-fundo); color: var(--sol-aviso-forte); }
.faixa-assin[hidden] { display: none; }
.faixa-assin > .ic { color: var(--sol-aviso-tinta); }
.faixa-assin p { flex: 1; margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; }
.faixa-assin .btn { margin: 0; min-height: 36px; flex-shrink: 0; }
.faixa-assin-erro { background: var(--sol-perigo-fundo); color: var(--sol-perigo); }
.faixa-assin-erro > .ic { color: var(--sol-perigo); }
.faixa-assin-info { background: var(--sol-neutro); color: var(--sol-rotulo); }
.faixa-assin-info > .ic { color: var(--sol-rotulo); }

.assin-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 var(--e-5); align-items: start; }
.assin-preco { margin: 0 0 var(--e-3); font-size: 32px; font-weight: 800; letter-spacing: -.5px; }
.assin-preco span { font-size: 14px; font-weight: 500; color: var(--sol-tinta-2); letter-spacing: 0; }
.assin-ajuda { margin: 0 0 var(--e-4); color: var(--sol-rotulo); line-height: 1.5; }
.assin-lista { margin: 0; }
.assin-linha { display: flex; justify-content: space-between; gap: var(--e-3); padding: var(--e-2) 0; border-top: 1px solid var(--sol-neutro); }
.assin-linha dt { color: var(--sol-tinta-2); }
.assin-linha dd { margin: 0; font-weight: 700; text-align: right; }
.assin-form .btn { margin-top: 0; }
.assin-aviso { margin: var(--e-3) 0 0; padding: var(--e-3) var(--e-4); border-radius: 10px; background: var(--sol-aviso-fundo); color: var(--sol-aviso-forte); font-size: 14px; line-height: 1.5; }
.assin-aviso[hidden] { display: none; }
.assin-link { margin: var(--e-3) 0 0; font-weight: 700; }
@media (max-width: 760px) {
    .faixa-assin { flex-wrap: wrap; padding: var(--e-3) var(--e-4); }
    .faixa-assin p { flex-basis: calc(100% - 40px); }
    .assin-grade { grid-template-columns: minmax(0, 1fr); }
}