/* Ovelha CRM — folha única. Sem framework, sem build. */

:root {
  --marca: #d1006f;
  --marca-escura: #a50058;
  --marca-clara: #fde7f2;
  --tinta: #1c1a1d;
  --tinta-suave: #635e67;
  --linha: #e6e2e8;
  --fundo: #f7f5f8;
  --papel: #ffffff;
  --ok: #10b981;
  --alerta: #f59e0b;
  --erro: #ef4444;
  --info: #2563eb;
  --raio: 10px;
  --sombra: 0 1px 2px rgba(28, 26, 29, .06), 0 4px 16px rgba(28, 26, 29, .05);
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--marca); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0 0 .6rem; line-height: 1.25; font-weight: 650; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .8rem; }

/* ------------------------------------------------------------- estrutura */

.app { display: flex; min-height: 100vh; }

.menu {
  width: 232px;
  flex: 0 0 232px;
  background: #fff;
  border-right: 1px solid var(--linha);
  padding: 1rem .75rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.menu .marca {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: 1.05rem; color: var(--tinta);
  padding: .25rem .5rem 1rem;
}
.menu .marca span.bolinha {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--marca); color: #fff;
  display: grid; place-items: center; font-size: .8rem;
}
.menu .marca:hover { text-decoration: none; }

.menu nav { display: flex; flex-direction: column; gap: 2px; }
.menu .grupo {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-suave); padding: 1rem .6rem .25rem; font-weight: 600;
}
.menu a.item {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .5rem .6rem; border-radius: 8px; color: var(--tinta); font-size: .92rem;
}
.menu a.item:hover { background: var(--fundo); text-decoration: none; }
.menu a.item.ativo { background: var(--marca-clara); color: var(--marca-escura); font-weight: 600; }
.menu a.item .conta {
  background: var(--marca); color: #fff; border-radius: 999px;
  font-size: .7rem; padding: .05rem .4rem; font-weight: 600;
}
.menu .rodape { margin-top: 1.5rem; padding: .75rem .6rem; border-top: 1px solid var(--linha); font-size: .8rem; color: var(--tinta-suave); }

.conteudo { flex: 1; min-width: 0; padding: 1.25rem 1.5rem 3rem; }

.topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.topo .sub { color: var(--tinta-suave); font-size: .9rem; margin: 0; }

/* ---------------------------------------------------------------- peças */

.cartao {
  background: var(--papel); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 1rem; box-shadow: var(--sombra);
}
.cartao + .cartao { margin-top: 1rem; }
.cartao h2, .cartao h3 { margin-top: 0; }

.grade { display: grid; gap: 1rem; }
.grade.c2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grade.c3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grade.c4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.numero { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.rotulo { font-size: .78rem; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .04em; }

.linha-botoes { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

.botao {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--marca); color: #fff; border: 1px solid var(--marca);
  padding: .45rem .85rem; border-radius: 8px; font-size: .9rem; font-weight: 550;
  cursor: pointer; font-family: inherit;
}
.botao:hover { background: var(--marca-escura); border-color: var(--marca-escura); text-decoration: none; color: #fff; }
.botao.claro { background: #fff; color: var(--tinta); border-color: var(--linha); }
.botao.claro:hover { background: var(--fundo); color: var(--tinta); }
.botao.perigo { background: #fff; color: var(--erro); border-color: #f3c6c6; }
.botao.perigo:hover { background: #fef2f2; color: var(--erro); }
.botao.pequeno { padding: .25rem .55rem; font-size: .8rem; }
.botao[disabled] { opacity: .5; cursor: not-allowed; }

.etiqueta {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .75rem; font-weight: 600; padding: .15rem .5rem; border-radius: 999px;
  background: var(--fundo); color: var(--tinta-suave); border: 1px solid var(--linha);
}
.etiqueta .ponto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ------------------------------------------------------------ formulários */

label { display: block; font-size: .82rem; font-weight: 600; color: var(--tinta-suave); margin-bottom: .2rem; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number],
input[type=search], select, textarea {
  width: 100%; padding: .45rem .6rem; border: 1px solid var(--linha); border-radius: 8px;
  font-family: inherit; font-size: .92rem; background: #fff; color: var(--tinta);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--marca-clara); border-color: var(--marca); }
textarea { min-height: 90px; resize: vertical; }
.campo { margin-bottom: .75rem; }
.campos { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.ajuda { font-size: .78rem; color: var(--tinta-suave); margin-top: .2rem; }
.filtros { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
.filtros .campo { margin: 0; min-width: 160px; }

/* ---------------------------------------------------------------- tabela */

table.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.tabela th {
  text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--tinta-suave); padding: .5rem .6rem; border-bottom: 1px solid var(--linha); white-space: nowrap;
}
table.tabela td { padding: .55rem .6rem; border-bottom: 1px solid var(--linha); vertical-align: middle; }
table.tabela tr:last-child td { border-bottom: 0; }
table.tabela tr:hover td { background: #fcfbfd; }
.direita { text-align: right; }
.centro { text-align: center; }
.nowrap { white-space: nowrap; }

/* ---------------------------------------------------------------- kanban */

.kanban { display: flex; gap: .85rem; overflow-x: auto; padding-bottom: 1rem; align-items: flex-start; }
.coluna {
  flex: 0 0 272px; background: #f1eef3; border-radius: var(--raio); padding: .6rem;
  max-height: calc(100vh - 170px); display: flex; flex-direction: column;
}
.coluna > header {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .8rem; font-weight: 700; color: var(--tinta-suave);
  padding: .1rem .3rem .55rem; text-transform: uppercase; letter-spacing: .03em;
}
.coluna > header .conta { background: #fff; border-radius: 999px; padding: 0 .45rem; font-size: .75rem; }
.coluna .cards { display: flex; flex-direction: column; gap: .5rem; overflow-y: auto; min-height: 40px; }
.coluna.alvo { outline: 2px dashed var(--marca); outline-offset: -4px; }

.card {
  background: #fff; border: 1px solid var(--linha); border-left: 3px solid var(--linha);
  border-radius: 8px; padding: .6rem .7rem; box-shadow: var(--sombra); cursor: grab; display: block; color: inherit;
}
.card:hover { text-decoration: none; border-color: #d8d2dc; }
.card .titulo { font-weight: 650; font-size: .9rem; margin-bottom: .15rem; }
.card .meta { font-size: .78rem; color: var(--tinta-suave); display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.card.arrastando { opacity: .45; }

/* --------------------------------------------------------------- avisos */

.aviso {
  padding: .6rem .85rem; border-radius: 8px; margin-bottom: 1rem;
  border: 1px solid; font-size: .9rem; display: flex; gap: .5rem; align-items: flex-start;
}
.aviso.ok { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.aviso.erro { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.aviso.atencao { background: #fffbeb; border-color: #fde68a; color: #92400e; }

.vazio { text-align: center; padding: 2rem 1rem; color: var(--tinta-suave); font-size: .9rem; }

/* ------------------------------------------------------- artes e produtos */

.artes { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.arte { border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; background: #fff; }
.arte .imagem { aspect-ratio: 4 / 3; background: #faf8fb center/contain no-repeat; display: grid; place-items: center; }
.arte .imagem img { max-width: 100%; max-height: 100%; display: block; }
.arte .corpo { padding: .6rem .7rem; font-size: .83rem; }
.arte .corpo .nome { font-weight: 600; word-break: break-word; }

.item-solicitacao { border: 1px solid var(--linha); border-radius: var(--raio); padding: .9rem; margin-bottom: .85rem; background: #fff; }
.item-solicitacao > header { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: baseline; margin-bottom: .6rem; }

.alerta-analise { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 8px; padding: .4rem .6rem; font-size: .8rem; margin-top: .4rem; }

.miniatura { width: 46px; height: 46px; border-radius: 6px; object-fit: cover; border: 1px solid var(--linha); background: #faf8fb; }

/* ------------------------------------------- editor da área de impressão */

.area-editor {
  position: relative; aspect-ratio: 1; width: 100%;
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: #faf8fb; overflow: hidden; margin-bottom: .75rem;
  touch-action: none; user-select: none;
}
.area-editor img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.area-editor__vazio {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--tinta-suave); font-size: .85rem; text-align: center; padding: 1rem;
}
.area-editor__ret {
  position: absolute; cursor: grab;
  border: 2px dashed var(--marca); background: rgba(209, 0, 111, .10);
  transform-origin: center;
}
.area-editor__ret.arrastando { cursor: grabbing; }
.area-editor__ret > span {
  position: absolute; right: -7px; bottom: -7px;
  width: 14px; height: 14px; border-radius: 3px;
  background: var(--marca); border: 2px solid #fff; cursor: nwse-resize;
}

.removida { opacity: .45; }
.removida input, .removida select { text-decoration: line-through; }
.opcao-removida { display: none; font-size: .75rem; color: var(--tinta-suave); white-space: nowrap; }
.removida .opcao-removida { display: inline; }
.removida [data-remover-opcao] { display: none; }

/* ---------------------------- fornecedores do produto, em cartoes */
.fornecedor {
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: .85rem; margin-bottom: .85rem; background: var(--fundo-suave, transparent);
}
.fornecedor__topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin-bottom: .6rem; padding-bottom: .5rem;
  border-bottom: 1px solid var(--linha);
}
.fornecedor__topo strong { color: var(--marca); }
.fornecedor.removida { opacity: .45; }

.cores-tira { margin-top: .75rem; padding-top: .6rem; border-top: 1px dashed var(--linha); }
.cores-tira__topo { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .5rem; }
.cores-tira__lista { display: flex; flex-wrap: wrap; gap: .5rem; }
.cores-tira__outras { margin-top: .6rem; }
.cores-tira__outras summary { cursor: pointer; }

.cor {
  display: flex; flex-direction: column; gap: .3rem;
  width: 116px; padding: .4rem; border: 1px solid var(--linha); border-radius: var(--raio);
}
.cor.removida { opacity: .45; }
.cor input, .cor select { font-size: .8rem; padding: .25rem .35rem; }
.cor__foto {
  position: relative; aspect-ratio: 1; border-radius: calc(var(--raio) - 2px);
  overflow: hidden; background: #faf8fb; display: grid; place-items: center;
}
.cor__foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cor__vazia { position: absolute; font-size: .72rem; color: var(--tinta-suave); }
.cor input[type=file] { font-size: .68rem; }

/* ------------------------------- modelos do produto (faixa + fornecedor) */

/* São nove campos por linha. Em largura cheia cabem; o que não pode é a tabela
   ficar numa coluna estreita, onde virava rolagem lateral com campos cortados. */
.modelos-tabela table.tabela { table-layout: auto; }
.modelos-tabela th { white-space: nowrap; }
.modelos-tabela td { vertical-align: middle; padding-top: .45rem; padding-bottom: .45rem; }
.modelos-tabela td input,
.modelos-tabela td select { width: 100%; min-width: 0; }
.modelos-tabela td .ajuda { font-size: .72rem; }

/* larguras por papel: o que é número não precisa de espaço de texto */
.modelos-tabela th:nth-child(1), .modelos-tabela td:nth-child(1) { min-width: 9rem; }
.modelos-tabela th:nth-child(2), .modelos-tabela td:nth-child(2) { width: 11rem; }
.modelos-tabela th:nth-child(4), .modelos-tabela td:nth-child(4) { width: 7rem; }
.modelos-tabela td input.direita { max-width: 7rem; margin-left: auto; }

/* no celular cada linha vira um bloco, com o nome do campo à esquerda */
@media (max-width: 860px) {
  .modelos-tabela thead { display: none; }
  .modelos-tabela tbody tr {
    display: block; border: 1px solid var(--linha); border-radius: var(--raio);
    padding: .6rem .7rem; margin-bottom: .6rem;
  }
  .modelos-tabela tbody td {
    display: grid; grid-template-columns: 6.5rem minmax(0, 1fr);
    align-items: center; gap: .6rem; border: 0; padding: .25rem 0;
  }
  .modelos-tabela tbody td::before {
    content: attr(data-rotulo);
    font-size: .72rem; font-weight: 600; color: var(--tinta-suave);
    text-transform: uppercase; letter-spacing: .04em;
  }
  .modelos-tabela tbody td.centro { grid-template-columns: 1fr; justify-items: start; }
  .modelos-tabela td input.direita { max-width: none; margin-left: 0; text-align: left; }
}

/* --------------------------------------------------- pop-up da arte */

.visor { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.visor__fundo { position: absolute; inset: 0; background: rgba(12, 10, 14, .65); }
.visor__caixa {
  position: relative; background: var(--papel); border-radius: var(--raio);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35); max-width: min(62rem, 100%);
  max-height: 90vh; overflow: auto; padding: 1rem 1.1rem 1.1rem;
}
.visor__topo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .8rem; }
.visor__telas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.visor__tela { margin: 0; }
.visor__moldura {
  background: #fff; border: 1px solid var(--linha); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; padding: .6rem; min-height: 220px;
  /* xadrez discreto: mostra onde o PNG é transparente */
  background-image: linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%),
                    linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.visor__moldura img { max-width: 100%; max-height: 52vh; object-fit: contain; display: block; }
.visor__tela figcaption { font-size: .82rem; margin-top: .4rem; font-weight: 600; }
.visor__pe { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--linha); }

/* ------------------------------------------------- financeiro por mês */

.barra-meses {
  display: flex; align-items: center; gap: .8rem 1.2rem; flex-wrap: wrap;
  margin-top: 1rem;
}
.barra-meses__ano { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; }
.barra-meses__meses { display: flex; gap: .4rem; flex-wrap: wrap; }

.mes-botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 3.1rem; padding: .35rem .7rem; border-radius: 999px;
  border: 1.5px solid var(--linha); color: var(--tinta-suave);
  font-size: .85rem; font-weight: 600; text-decoration: none;
}
.mes-botao:hover { border-color: var(--marca); color: var(--marca); text-decoration: none; }
/* contorno marcado = tem lançamento; preenchido = é o mês aberto */
.mes-botao.tem-movimento { border-color: var(--marca); color: var(--marca); }
.mes-botao.ativo, .mes-botao.ativo:hover { background: var(--marca); border-color: var(--marca); color: #fff; }

.mes-bloco { margin-top: 1rem; }
.mes-bloco + .mes-bloco { margin-top: 1rem; }
.mes-cabeca {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem 1.5rem; flex-wrap: wrap; margin-bottom: .6rem;
  padding-bottom: .6rem; border-bottom: 2px solid var(--linha);
}
.mes-cabeca h2 { margin: 0; font-size: 1.05rem; }
.mes-numeros { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.mes-numeros div { display: flex; flex-direction: column; line-height: 1.25; }
.mes-numeros .rotulo { font-size: .66rem; }
.mes-numeros strong { font-size: .98rem; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- proposta */

.proposta-img { width: 68px; padding-right: 0; }
.proposta-img img {
  width: 58px; height: 58px; object-fit: contain; display: block;
  border: 1px solid var(--linha); border-radius: 8px; background: #fff;
}
.proposta-aceite {
  margin-top: 1.2rem; padding: .8rem 1rem; border: 2px solid var(--ok);
  border-radius: 10px; color: var(--ok); font-weight: 600;
}
.proposta-aceite .ajuda { color: var(--ok); font-weight: 400; }
.proposta-assinar {
  margin-top: 1.2rem; padding: .8rem 1rem; border: 2px dashed var(--linha);
  border-radius: 10px; color: var(--tinta-suave); font-size: .9rem;
}
/* na folha impressa o fundo é branco: a imagem não pode sumir */
@media print {
  .proposta-img img { border-color: #ccc; }
  .proposta-aceite, .proposta-assinar { break-inside: avoid; }
}

/* ------------------------------------------- arte anexada ao item do orçamento */

.arte-item { display: flex; align-items: center; gap: .3rem; margin-bottom: .25rem; font-size: .82rem; }
.arte-item a { word-break: break-all; }
input.arquivo-pequeno { font-size: .75rem; padding: .2rem; max-width: 100%; }

/* ------------------------------------------------------- fichas em cards */

.fichas { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

.ficha {
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: .9rem; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: .7rem;
}
.ficha:hover { border-color: var(--marca); }

.ficha .cabeca { display: flex; gap: .7rem; align-items: flex-start; }
.ficha .inicial {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--marca-clara); color: var(--marca-escura);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem; letter-spacing: .02em;
}
.ficha .nome { font-weight: 700; line-height: 1.25; }
.ficha .quem { font-size: .82rem; color: var(--tinta-suave); }
.ficha .contato { font-size: .82rem; color: var(--tinta-suave); line-height: 1.5; word-break: break-word; }

/* números do rodapé: um ao lado do outro, separados por um fio */
.ficha .marcas { display: flex; gap: 1rem; border-top: 1px solid var(--linha); padding-top: .6rem; margin-top: auto; }
.ficha .marcas div { line-height: 1.2; }
.ficha .marcas .valor { font-weight: 700; font-size: .95rem; }
.ficha .marcas .rotulo { font-size: .68rem; }

/* ------------------------------------------------------------- impressão */

.folha { max-width: 820px; margin: 2rem auto; background: #fff; padding: 2.5rem; border-radius: var(--raio); box-shadow: var(--sombra); }
@media print {
  .sem-impressao { display: none !important; }
  body { background: #fff; }
  .folha { box-shadow: none; margin: 0; max-width: none; padding: 0; }
}

/* ---------------------------------------------------------------- mobile */

@media (max-width: 860px) {
  .app { flex-direction: column; }
  .menu { width: auto; flex: none; height: auto; position: static; border-right: 0; border-bottom: 1px solid var(--linha); }
  .menu nav { flex-direction: row; flex-wrap: wrap; }
  .menu .grupo { display: none; }
  .conteudo { padding: 1rem; }
  .coluna { flex-basis: 85vw; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --tinta: #ece9ed; --tinta-suave: #a9a2ae; --linha: #332f37;
    --fundo: #171519; --papel: #201d23; --marca-clara: #3a0b24;
  }
  :root:not([data-tema="claro"]) .menu,
  :root:not([data-tema="claro"]) .cartao,
  :root:not([data-tema="claro"]) .card,
  :root:not([data-tema="claro"]) .arte,
  :root:not([data-tema="claro"]) .item-solicitacao,
  :root:not([data-tema="claro"]) .login .caixa,
  :root:not([data-tema="claro"]) .folha { background: var(--papel); }
  :root:not([data-tema="claro"]) input, :root:not([data-tema="claro"]) select,
  :root:not([data-tema="claro"]) textarea { background: #15131a; color: var(--tinta); }
  :root:not([data-tema="claro"]) .coluna { background: #1b1920; }
  :root:not([data-tema="claro"]) .botao.claro { background: var(--papel); color: var(--tinta); }
  :root:not([data-tema="claro"]) table.tabela tr:hover td { background: #262129; }
  :root:not([data-tema="claro"]) .arte .imagem { background-color: #15131a; }
  :root:not([data-tema="claro"]) .ficha .inicial { background: #33182a; color: #ff8fc5; }
}