/* Plataforma EVF — protótipo. Visual sóbrio: o foco é a planilha.
   Design system: o mesmo da Plataforma de Doação (paleta oficial Telka: grafite, taupe, oliva,
   dourado fosco, marfim; Montserrat na interface e Playfair Display só nos títulos).
   Fonte dos valores: Plataforma de Doação\referencia-lovable\src\styles.css.
   Os NOMES das variáveis abaixo não mudam (o código e os testes dependem deles); só os valores. */
:root {
  /* paleta da marca (idêntica à Doação) */
  --grafite: #4a463d;
  --taupe: #67624d;
  --oliva: #847d62;
  --dourado: #a49c7b;
  --marfim: #f1efe6;
  --mineral: #d5d3cb;
  --pedra: #b2b0a7;

  --fundo: #f1efe6;          /* marfim: fundo da tela */
  --painel: #fbfaf6;         /* "card" da Doação: folha onde ficam tabelas, faixa e diálogos */
  --texto: #111111;          /* preto (26/10/2026: letras pretas, mais fácil de ler) */
  --suave: #3f3b33;          /* texto secundário, ainda bem escuro (contraste 10:1 sobre branco) */
  --linha: #d5d3cb;          /* mineral */
  --fase: #e3e0d4;
  --subfase: #eeece2;
  --destaque: #67624d;       /* taupe: texto de marca, aba ativa, linha de destino ao arrastar */
  --primario: #a49c7b;       /* dourado fosco: fundo do botão principal (um por área) */
  --primario-texto: #2f2d25; /* primary-foreground da Doação (contraste 5,9:1 sobre o dourado) */
  --selecao: #e7e3d0;
  --cursor: #847d62;         /* anel de foco da Doação (--ring) */
  --pendente: #6b4309;
  --perigo: #9a3f2b;         /* destructive da Doação; cor de perigo continua (a aprovar) */
  --perigo-texto: #9a3f2b;
  --dif: #f6ecd0;
  --camada-a: #f0e9d2;
  --raio: 8px;               /* cartão, diálogo, menu (Doação usa 12px; a planilha pede menos) */
  --raio-p: 6px;             /* botão e campo */
  --fonte: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --fonte-titulo: "Playfair Display", Georgia, serif;
}
/* Dark theme disabled – forced light theme */

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--fonte); font-size: 12.5px; color: var(--texto); background: var(--fundo);
  display: flex; flex-direction: column; font-variant-numeric: tabular-nums;
}
button, input, select, textarea { font: inherit; color: inherit; }
button {
  background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 4px 10px; cursor: pointer;
}
button:hover { border-color: var(--oliva); background: var(--subfase); }
button.primario { background: var(--primario); color: var(--primario-texto); border-color: var(--primario); font-weight: 600; }
button.primario:hover { background: var(--taupe); border-color: var(--taupe); color: #fff; }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, summary:focus-visible { outline: 2px solid var(--cursor); outline-offset: 2px; }
/* Perigo: apaga ou remove. Fica separado do grupo; sempre com confirmação em 2 etapas. */
button.perigo { background: var(--perigo); color: #fff; border-color: var(--perigo); margin-left: 24px; }
button.perigo:hover { filter: brightness(.9); border-color: var(--perigo); }
button.perigo-suave { color: var(--perigo-texto); }
#dialogo .rodape-dialogo .perigo { margin-left: 0; margin-right: auto; }
/* menu "Mais ações": guarda os botões menos usados para a barra não ficar cheia */
details.menu { position: relative; }
details.menu > summary { list-style: none; cursor: pointer; border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 4px 10px; background: var(--painel); }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu > summary::after { content: " ▾"; }
details.menu .itens-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 5; display: flex; flex-direction: column; gap: 4px;
  min-width: 220px; padding: 6px; background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: 0 6px 20px rgba(74,70,61,.18);
}
details.menu .itens-menu button { text-align: left; }
input, select, textarea { background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 4px 6px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--cursor); outline-offset: -1px; }
.suave { color: var(--suave); }
.pendente { color: var(--pendente); font-size: 11px; letter-spacing: .02em; }
/* Títulos em Playfair Display, como na Doação. Só h1–h3 (nunca em tabela, botão ou campo). */
h1, h2, h3 { margin: 0 0 8px; font-family: var(--fonte-titulo); font-weight: 500; letter-spacing: -.005em; }
h1 { font-size: 22px; } h2 { font-size: 18px; } h3 { font-size: 15px; }

/* topo */
#topo {
  display: flex; align-items: center; gap: 12px; padding: 8px 14px;
  background: var(--painel); border-bottom: 1px solid var(--linha);
}
#topo .marca { font-family: var(--fonte-titulo); font-size: 17px; font-weight: 600; color: var(--grafite); white-space: nowrap; letter-spacing: -.005em; }
#topo .trilha { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#topo .trilha a { color: inherit; text-decoration: none; cursor: pointer; }
#topo .trilha a:hover { text-decoration: underline; }
#topo .acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }

#corpo { flex: 1; display: flex; min-height: 0; }
#lateral {
  width: 240px; flex: none; overflow: auto; padding: 10px; background: var(--painel); border-right: 1px solid var(--linha);
}
#lateral .item { padding: 3px 6px; border-radius: var(--raio-p); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#lateral .item:hover { background: var(--subfase); }
#lateral .item.ativo { background: var(--selecao); font-weight: 600; }
#lateral .cliente { font-weight: 600; margin-top: 8px; }
#lateral .obra { padding-left: 14px; }
#lateral .evf { padding-left: 28px; color: var(--suave); }
#principal { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.pagina { flex: 1; padding: 16px; overflow: auto; }

/* abas */
.abas { display: flex; gap: 2px; padding: 8px 12px 0; background: var(--painel); border-bottom: 1px solid var(--linha); }
.abas button { border: none; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 6px 12px; }
.abas button.ativa { border-bottom-color: var(--destaque); font-weight: 600; }

.ferramentas {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 12px;
  background: var(--painel); border-bottom: 1px solid var(--linha);
}
.ferramentas .sep { width: 1px; height: 20px; background: var(--linha); margin: 0 4px; }
.ferramentas input[type=search] { width: 220px; }

/* grade (Árvore do EVF) */
.grade { flex: 1; overflow: auto; background: var(--painel); }
table.planilha { border-collapse: collapse; table-layout: fixed; }
.planilha th {
  position: sticky; top: 0; z-index: 2; background: var(--painel); text-align: left; font-weight: 600;
  padding: 6px; border-bottom: 1px solid var(--linha); color: var(--suave); white-space: nowrap;
}
/* alça de arrastar a borda do título da coluna */
.planilha th .redim { position: absolute; top: 0; right: 0; width: 6px; height: 100%; cursor: col-resize; touch-action: none; }
.planilha th .redim:hover, .planilha th .redim.arrastando { background: rgba(103, 98, 77, .35); }
.planilha td {
  padding: 3px 6px; border-bottom: 1px solid var(--linha); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; height: 26px;
}
.planilha td.n, .planilha th.n { text-align: right; font-variant-numeric: tabular-nums; }
/* Nº e Descrição ficam parados ao rolar para o lado */
.planilha td.fixa { position: sticky; z-index: 1; background: var(--painel); }
.planilha th.fixa { position: sticky; z-index: 3; }
.planilha td.fixa[data-c="1"], .planilha th.fixa:nth-child(2) { box-shadow: 1px 0 0 var(--linha); }
.planilha tr.fase td { background: var(--fase); font-weight: 600; }
.planilha tr.subfase td { background: var(--subfase); font-weight: 600; }
.planilha tr.insumo td { color: var(--suave); }
.planilha tr.sel td { background: var(--selecao); }
.planilha td.cur { outline: 2px solid var(--cursor); outline-offset: -2px; }
/* arrastar fase: a mão no nome, a linha esmaecida enquanto sai, e a barra onde ela vai cair */
.planilha tr.fase[draggable="true"] td { cursor: grab; }
.planilha tr.arrastando td { opacity: 0.45; }
.planilha tr.solta-antes td { box-shadow: inset 0 3px 0 var(--destaque); }
.planilha tr.solta-depois td { box-shadow: inset 0 -3px 0 var(--destaque); }
.planilha td.dif { background: var(--dif) !important; }
.planilha td.ed { padding: 0; }
.planilha td.ed input, .planilha td.ed select {
  width: 100%; height: 25px; border: none; border-radius: 0; outline: 2px solid var(--cursor); outline-offset: -2px; padding: 2px 6px;
}
.tri { display: inline-block; width: 14px; cursor: pointer; color: var(--suave); user-select: none; }
.conta { color: var(--suave); font-weight: 400; font-size: 11px; margin-left: 6px; }
/* faixas da curva ABC (A = primeiros 80% do custo, B = até 95%, C = o resto) */
.pagina .faixa { display: inline-block; min-width: 20px; text-align: center; font-weight: 700; padding: 0 5px; border-radius: var(--raio-p); }
/* TODO(human): escolher as 3 cores das faixas A, B e C (ver "Learn by Doing" na conversa).
   Hoje estão como na apresentação de referência (vermelho, amarelo, verde). */
.pagina .faixa-A { background: #e5231b; color: #fff; }
.pagina .faixa-B { background: #ffe600; color: #1f1d1a; }
.pagina .faixa-C { background: #1a9e3a; color: #fff; }

/* tabelas simples (insumos, ABC, leitura) */
table.lista { border-collapse: collapse; width: 100%; background: var(--painel); }
.lista th { position: sticky; top: 0; background: var(--painel); text-align: left; padding: 6px; border-bottom: 1px solid var(--linha); color: var(--suave); font-weight: 600; white-space: nowrap; }
.lista td { padding: 3px 6px; border-bottom: 1px solid var(--linha); }
.lista td.n, .lista th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lista input { width: 100%; border-color: transparent; background: transparent; }
.lista input:hover { border-color: var(--linha); }
.lista tr.clicavel { cursor: pointer; }
.lista tr.clicavel:hover td { background: var(--subfase); }

/* rodapé */
#rodape {
  display: flex; gap: 18px; align-items: center; padding: 6px 14px; background: var(--painel);
  border-top: 1px solid var(--linha); white-space: nowrap; overflow: hidden;
}
#rodape .total { font-weight: 700; }
#rodape .msg { flex: 1; text-align: right; color: var(--suave); overflow: hidden; text-overflow: ellipsis; }
#rodape a { color: var(--pendente); cursor: pointer; text-decoration: underline; }
#rodape .aviso-nuvem { font-weight: 600; color: var(--pendente); }
/* edição em equipe: linha em que outra pessoa está (o nome aparece ao passar o mouse) */
.planilha tr.outro-edita td:first-child { box-shadow: inset 4px 0 0 var(--pendente); }

/* entrada da equipe: aparece antes da plataforma para cada pessoa se identificar */
#entrada { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--fundo); }
#entrada[hidden] { display: none; }
.entrada-cartao { width: min(460px, 100%); padding: 28px; background: var(--painel); border: 1px solid var(--linha); border-radius: calc(var(--raio) + 4px); box-shadow: 0 12px 40px rgba(74,70,61,.18); }
.entrada-marca { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.entrada-marca img { width: 44px; height: 44px; object-fit: contain; }
.entrada-marca span { font-family: var(--fonte-titulo); font-size: 21px; font-weight: 600; }
.entrada-cartao h1 { margin-bottom: 6px; }
.entrada-cartao .campos { grid-template-columns: 1fr; margin-top: 18px; }
.entrada-acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.entrada-erro { margin: 14px 0 0; color: var(--perigo); }

/* cartões e formulários */
.cartao { background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px; margin-bottom: 12px; }
.campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 10px; }
.campos label { display: flex; flex-direction: column; gap: 3px; color: var(--suave); font-size: 12px; }
.campos label input, .campos label select { color: var(--texto); font-size: 13px; }
.linha-botoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* diálogo */
#fundo-dialogo { position: fixed; inset: 0; background: rgba(74,70,61,.4); display: flex; align-items: center; justify-content: center; z-index: 30; }
#fundo-dialogo[hidden] { display: none; }
#dialogo {
  background: var(--painel); border-radius: calc(var(--raio) + 2px); padding: 18px; width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 48px); overflow: auto; box-shadow: 0 10px 40px rgba(74,70,61,.28);
}
#dialogo textarea { width: 100%; min-height: 220px; font-family: Consolas, monospace; font-size: 12px; }
#dialogo .rodape-dialogo { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
#dialogo ul { margin: 6px 0; padding-left: 20px; }
kbd { border: 1px solid var(--linha); border-bottom-width: 2px; border-radius: 3px; padding: 0 4px; font-family: inherit; font-size: 11px; background: var(--fundo); }
.atalhos td { padding: 3px 10px 3px 0; vertical-align: top; }

@media (max-width: 760px) {
  #lateral { display: none; }
  .ferramentas input[type=search] { width: 100%; }
}

/* ===== Faixa de opções (P24, 23/10/2026) =====
   Seção isolada: pode ser refeita no Claude Design sem mexer no resto. Abas de comandos em cima, grupos com o nome embaixo.
   Só variáveis do :root (modo escuro vale sozinho). Sem ícones: o texto do comando está sempre visível. */
div.faixa { background: var(--painel); border-bottom: 1px solid var(--linha); position: relative; z-index: 4; flex: none; }
.faixa-abas { display: flex; align-items: flex-end; gap: 2px; padding: 4px 12px 0; overflow: hidden; }
.faixa-abas button { border: 1px solid transparent; border-bottom: none; border-radius: var(--raio-p) var(--raio-p) 0 0; background: none; padding: 4px 12px; white-space: nowrap; }
.faixa-abas button:hover { background: var(--subfase); }
.faixa-abas button.ativa { background: var(--fundo); border-color: var(--linha); font-weight: 600; margin-bottom: -1px; }
.faixa-abas button.ctx { color: var(--destaque); }
.faixa-abas .faixa-recolher { margin-left: auto; color: var(--suave); font-size: 12px; border-radius: 4px; margin-bottom: 2px; }
.faixa-painel { position: relative; display: flex; align-items: stretch; gap: 0; padding: 6px 12px 4px; background: var(--fundo); border-top: 1px solid var(--linha); min-height: 74px; }
.faixa-painel[hidden], .faixa-pop[hidden], .faixa-mais[hidden] { display: none; }
.faixa-grupo { flex: none; display: flex; flex-direction: column; justify-content: space-between; padding: 0 10px; border-right: 1px solid var(--linha); }
.faixa-grupo:first-child { padding-left: 0; }
.faixa-itens { display: flex; align-items: center; gap: 4px; flex: 1; }
.faixa-itens.coluna { flex-direction: column; align-items: stretch; justify-content: center; gap: 4px; }
/* nome do grupo: o estilo "rótulo" da Doação (caixa alta, espaçado, semibold) */
.faixa-nome { text-align: center; font-size: 11px; color: var(--suave); padding-top: 3px; white-space: nowrap; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.faixa-itens button { white-space: nowrap; }
.faixa-itens button.perigo { margin-left: 0; }
.faixa-itens input[type=search] { width: 250px; }
.faixa-campo { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--suave); }
.faixa-campo span { min-width: 44px; }
.faixa-campo select { max-width: 190px; }
.faixa-marca { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.faixa-texto { font-size: 12px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.faixa-mais { flex: none; display: flex; align-items: center; margin-left: auto; padding-left: 10px; }
.faixa-pop {
  position: absolute; right: 8px; top: 100%; z-index: 6; display: flex; flex-direction: column; gap: 8px; padding: 10px;
  background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: 0 6px 20px rgba(74,70,61,.18);
}
.faixa-pop .faixa-grupo { border-right: none; padding: 0; border-bottom: 1px solid var(--linha); padding-bottom: 6px; }
.faixa-pop .faixa-grupo:last-child { border-bottom: none; }
.faixa-pop .faixa-nome { text-align: left; }
.faixa.recolhida .faixa-painel { display: none; }
.faixa.recolhida.temp .faixa-painel:not([hidden]) { display: flex; position: absolute; left: 0; right: 0; top: 100%; box-shadow: 0 6px 20px rgba(74,70,61,.18); border-bottom: 1px solid var(--linha); }
.faixa.recolhida .faixa-abas { padding-bottom: 4px; }
.faixa.recolhida .faixa-abas button.ativa { background: none; border-color: transparent; margin-bottom: 0; }

/* Janela do modo apresentação: mostra os slides como vão para o PowerPoint, antes de baixar. */
#modo-apresentacao { position: fixed; inset: 0; z-index: 30; background: #3a372f; display: flex; flex-direction: column; }
#ma-barra { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--grafite); color: #f1efe6; flex: none; }
#ma-barra .ma-titulo { margin-right: auto; font-weight: 600; }
#ma-pos { opacity: .8; min-width: 56px; text-align: center; }
#ma-area { position: relative; flex: 1; overflow: hidden; }
#ma-lamina { position: absolute; width: 960px; height: 540px; background: #fff; transform-origin: 0 0; box-shadow: 0 6px 30px rgba(0,0,0,.5); overflow: hidden; }
#ma-barra button { color: var(--grafite); }
#ma-dica { font-size: 12px; opacity: .8; }
/* alça de arrastar a borda da coluna Descrição (composição) */
.ma-alca { position: absolute; width: 8px; cursor: col-resize; background: rgba(103, 98, 77, .0); border-left: 2px dashed rgba(103, 98, 77, .5); touch-action: none; z-index: 5; }
.ma-alca:hover, .ma-alca.arrastando { background: rgba(103, 98, 77, .18); border-left-color: #67624d; }
#ma-barra button.primario { color: var(--primario-texto); }

/* Topo: ↶ ↷ e menus Arquivo, Nuvem e Mais (os botões ficam dentro dos menus). */
#topo .acoes { flex-wrap: nowrap; align-items: center; }
#topo .acoes > button { min-width: 34px; }
details.menu { position: relative; }
details.menu > summary { list-style: none; cursor: pointer; padding: 6px 12px; border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--painel); user-select: none; white-space: nowrap; }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu > summary::after { content: ' ▾'; font-size: 11px; opacity: .7; }
details.menu[open] > summary { background: var(--fase); }
details.menu > .menu-itens { position: absolute; right: 0; top: calc(100% + 4px); z-index: 25; min-width: 200px; display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: 0 6px 20px rgba(74,70,61,.18); }
details.menu .menu-itens button { text-align: left; border: 0; background: transparent; padding: 7px 10px; border-radius: var(--raio-p); }
details.menu .menu-itens button:hover:not([disabled]) { background: var(--marfim); }
details.menu .menu-itens button[disabled] { opacity: .45; }
details.menu .menu-info { padding: 6px 10px; font-size: 12px; color: var(--suave); border-bottom: 1px solid var(--linha); margin-bottom: 2px; }

/* Faixa compacta, como no Revit (25/10/2026): botões e abas menores para sobrar espaço para a grade. */
.faixa-abas { padding: 2px 10px 0; }
.faixa-abas button { padding: 2px 10px; font-size: 12.5px; }
.faixa-painel { padding: 3px 10px 2px; min-height: 0; }
.faixa-grupo { padding: 0 8px; }
.faixa-itens { gap: 3px; }
.faixa-itens.coluna { gap: 2px; }
.faixa-itens button { padding: 2px 8px; font-size: 12px; line-height: 1.35; }
.faixa-nome { font-size: 10px; padding-top: 1px; }
.faixa-itens input[type=search] { width: 210px; padding: 2px 6px; font-size: 12px; }
.faixa-campo { font-size: 11px; gap: 4px; }
.faixa-campo span { min-width: 36px; }
.faixa-campo select { font-size: 12px; padding: 1px 3px; max-width: 170px; }
.faixa-marca { font-size: 12px; }

/* Menos usados (Linhas e Equipe): botões pequenos em grade, sempre à vista, sem ir para o Mais. */
.faixa-itens.fgrade { display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto); gap: 2px 4px; align-content: center; justify-content: start; }
.faixa-itens button.peq { font-size: 11px; padding: 1px 7px; text-align: left; line-height: 1.3; }
.faixa-itens input[type=search] { width: 180px; }
.faixa-campo select { max-width: 150px; }
.faixa-itens.fgrade2 { grid-template-rows: repeat(2, auto); }
.faixa-itens input[type=search] { width: 165px; }
.faixa-campo select { max-width: 135px; }


/* ===== Identidade visual (Doação) — 26/10/2026 =====
   Logo, opções de criar, estado vazio e ícones (os ícones ficam em icones.css, gerado por ferramentas/gerar_icones.js). */
#topo { gap: 14px; }
#topo .logo { display: flex; align-items: center; flex: none; }
#topo .logo img { height: 34px; width: auto; display: block; }
#topo .marca { border-left: 1px solid var(--linha); padding-left: 14px; line-height: 34px; }

/* ícones: cor própria nas abas e na lista da esquerda; seguem a cor do texto nos botões */
.abas button::before, #lateral .item::before { color: var(--oliva); }
.abas button.ativa::before { color: var(--taupe); }
#lateral .item.cliente::before, #lateral .item.obra::before, #lateral .item.evf::before { width: 14px; height: 14px; margin-right: 6px; }
#lateral .item.ativo::before { color: var(--taupe); }
#lateral .item { display: block; }
#lateral .item.cliente { color: var(--grafite); }
#lateral .item.cliente:hover { background: none; }

/* estado vazio: a flor-de-lis pequena, só aqui (nunca como ícone de função) */
.vazio { text-align: center; padding: 14px 8px; }
.vazio img { width: 44px; height: auto; display: block; margin: 0 auto 6px; }
.vazio p { margin: 0; }
.cartao .vazio { padding: 6px 8px 14px; }

/* opções de criar: título + uma linha dizendo o que faz. Uma só é principal (dourada). */
.cartao-destaque { box-shadow: 0 2px 16px rgba(160, 120, 40, .08); }
.titulo-opcoes { margin: 16px 0 8px; }
.opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; }
button.opcao {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left;
  padding: 12px 14px 12px 46px; border-radius: var(--raio); position: relative; line-height: 1.35;
}
button.opcao::before { position: absolute; left: 14px; top: 12px; width: 22px; height: 22px; margin: 0; vertical-align: baseline; color: var(--oliva); }
button.opcao.primario::before { color: var(--primario-texto); }
button.opcao:hover::before { color: inherit; }
.opcao-t { font-weight: 600; font-size: 13px; }
.opcao-d { font-size: 11.5px; font-weight: 400; color: var(--suave); }
button.opcao.primario .opcao-d { color: inherit; opacity: .85; }
button.opcao:hover .opcao-d { color: inherit; }
.zona-perigo { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--linha); }
.zona-perigo button.perigo { margin-left: 0; }

/* diálogo: título em Playfair já vem do h2/h3; filete discreto sob ele */
#dialogo h2, #dialogo h3 { padding-bottom: 6px; border-bottom: 1px solid var(--linha); margin-bottom: 10px; }

/* botão "Escolher arquivo" do navegador, na paleta */
input[type=file] { padding: 3px; }
input[type=file]::file-selector-button { font: inherit; background: var(--painel); color: var(--texto); border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 3px 10px; margin-right: 8px; cursor: pointer; }
input[type=file]::file-selector-button:hover { border-color: var(--oliva); background: var(--subfase); }

/* Área principal em branco (pedido de 26/10/2026). */
#principal { --painel: #ffffff; background: #ffffff; } /* --painel só aqui dentro: grade, abas, faixa e cartões ficam brancos */

/* Letras pretas (26/10/2026): serviços, insumos e números dos itens também. Só PENDENTE, perigo e links mantêm cor própria. */
.planilha tr.insumo td, .planilha td, .lista td { color: var(--texto); }
#principal h2, #principal h3, #topo .marca, #lateral .item.cliente { color: var(--texto); }
#topo .trilha, #lateral .item, #rodape { color: var(--texto); }
.tri { color: var(--texto); }
.conta, .campos label, .planilha th, .lista th { color: var(--suave); }
.pendente, .planilha .pendente { font-weight: 600; }

/* Caneta: editar o título do EVF na tela da obra. Aparece sempre (vale também no toque), forte ao passar o mouse. */
td.titulo-evf { white-space: nowrap; }
button.icone-so { border-color: transparent; background: transparent; padding: 3px 6px; margin-left: 6px; color: var(--suave); }
button.icone-so:hover { border-color: var(--linha); background: var(--subfase); color: var(--texto); }
.campo-titulo-evf { width: min(360px, 100%); font-weight: 600; }
.titulo-evf-txt, td.titulo-evf button.icone-so { vertical-align: middle; }
table.lista .campo-titulo-evf { border-color: var(--oliva); background: #ffffff; }