/* Ficha do lead (telas/ficha.mjs): o mesmo painel na caixa, no funil e nos leads.
 * Os blocos (.ficha-bloco, .ficha-dados, .movimentos) vêm de caixa.css.
 * Dourado só no Salvar quando há mudança: é o botão que decide. A barra
 * do formulário com mudança usa a cor de atenção, não o dourado.
 */

.fl { display: grid; gap: var(--e-4); padding: 0 var(--e-4) var(--e-6); align-content: start; }
.fl.sujo .fl-form { box-shadow: inset 3px 0 0 var(--aviso); padding-left: var(--e-3); }

.fl-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-2); padding-top: var(--e-4); }
.fl-quem { min-width: 0; }
.fl-nome { font-size: var(--t-16); font-weight: 700; overflow-wrap: anywhere; }
.fl-telefone { font-size: var(--t-13); color: var(--suave); font-variant-numeric: tabular-nums; }
.fl-cabeca-acoes { display: flex; gap: var(--e-1); flex: none; }
.fl-cabeca-acoes .botao { padding: 4px 10px; font-size: var(--t-13); }
.fl-vazio { text-align: left; padding: var(--e-4) 0; }

.fl-corpo { display: grid; gap: var(--e-4); }
.fl-faixas:empty { display: none; }
.fl-faixas .faixa { border-radius: var(--raio-p); border-bottom: 0; padding: var(--e-2) var(--e-3); font-size: var(--t-13); }

.fl-mover, .fl-fechado { display: grid; gap: var(--e-2); justify-items: start; }
.fl-fechado-texto { font-size: var(--t-13); }

/* Formulário */
.fl-form { display: grid; gap: var(--e-3); transition: box-shadow 0.15s, padding 0.15s; }
.fl-campo { display: grid; gap: var(--e-1); font-size: var(--t-12); font-weight: 600; color: var(--suave); min-width: 0; }
.fl-campo .campo { font-size: var(--t-14); font-weight: 400; color: var(--texto); width: 100%; min-width: 0; }
.fl-campo textarea { resize: vertical; min-height: 56px; }
.fl-dupla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); }
.fl-mudou-fora { border-radius: var(--raio-p); border-bottom: 0; background: var(--aviso-fundo); color: var(--aviso-texto); font-size: var(--t-13); padding: var(--e-2) var(--e-3); }
.fl-salvar-linha { display: flex; justify-content: flex-end; gap: var(--e-2); }
.fl.sujo .fl-salvar { background: var(--dourado); border-color: var(--dourado); color: var(--preto); }
.fl.sujo .fl-salvar:hover { background: var(--dourado-forte); border-color: var(--dourado-forte); }

/* Etiquetas: nome livre, cor da paleta fechada. */
.etiquetas { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.etiquetas:empty { display: none; }
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: var(--pilula);
  padding: 1px 8px;
  font-size: var(--t-12);
  font-weight: 600;
  line-height: 18px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.etiqueta-tirar {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--t-14);
  line-height: 1;
  padding: 0 0 0 2px;
  cursor: pointer;
  opacity: 0.7;
}
.etiqueta-tirar:hover, .etiqueta-tirar:focus-visible { opacity: 1; }
.fl-por-etiqueta { font-size: var(--t-13); }

.etq-azul { background: var(--etq-azul-fundo); color: var(--etq-azul-texto); }
.etq-verde { background: var(--ok-fundo); color: var(--ok-texto); }
.etq-amarelo { background: var(--etq-amarelo-fundo); color: var(--etq-amarelo-texto); }
.etq-laranja { background: var(--aviso-fundo); color: var(--aviso-texto); }
.etq-vermelho { background: var(--perigo-fundo); color: var(--perigo-texto); }
.etq-roxo { background: var(--simulador-fundo); color: var(--simulador); }
.etq-rosa { background: var(--etq-rosa-fundo); color: var(--etq-rosa-texto); }
.etq-cinza { background: var(--painel); color: var(--suave); }

/* O painel da ficha ao lado do funil e da lista de leads. */
.painel-ficha {
  background: var(--superficie);
  border-left: 1px solid var(--borda);
  min-height: 0;
  overflow-y: auto;
}

@media (max-width: 1199px) {
  .painel-ficha {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(380px, 100%);
    z-index: 6;
    box-shadow: var(--sombra-forte);
  }
}

/* No dedo (mesmo num notebook com tela de toque): o X da etiqueta ganha alvo de 32px. */
@media (any-pointer: coarse) {
  .etiqueta { line-height: var(--alvo-toque); padding-right: 0; }
  .etiqueta-tirar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--alvo-toque);
    min-height: var(--alvo-toque);
    padding: 0;
    opacity: 1;
  }
}

@media (max-width: 767px) {
  .painel-ficha { width: 100%; border-left: 0; }
  .fl-dupla { grid-template-columns: minmax(0, 1fr); }
}