/* ============================================================
   Ateliê Carol Meiga — Sistema de Gestão
   Paleta do projeto de interiores (Studio 1528, set/2026):
   Flor de Cerejeira · Papel de Presente · Piso Carvalho · Dourado
   ============================================================ */

:root {
  /* superfícies */
  --papel:        #EFEEE8;
  --papel-fundo:  #E6E4DB;
  --card:         #FBFAF6;
  --card-2:       #F4F2EB;

  /* marca */
  --cerejeira:    #C3B1AD;
  --cerejeira-f:  #9A7E82;
  --carvalho:     #CAAF93;
  --areia:        #C2B4A6;
  --dourado:      #A98B63;
  --dourado-claro:#D7C2A0;

  /* tinta */
  --tinta:        #332E2B;
  --tinta-2:      #6A605A;
  --tinta-3:      #948A82;
  --linha:        rgba(51, 46, 43, .13);
  --linha-forte:  rgba(51, 46, 43, .26);

  /* estado */
  --ok:           #0F7A43;
  --ok-bg:        rgba(15, 122, 67, .11);
  --aviso:        #9C6408;
  --aviso-bg:     rgba(156, 100, 8, .12);
  --critico:      #A93A33;
  --critico-bg:   rgba(169, 58, 51, .11);

  /* séries de gráfico (validadas p/ daltonismo) */
  --serie-mag:    #A2506B;
  --serie-ent:    #1D6FA8;
  --serie-sai:    #C8791B;
  --grade:        rgba(51, 46, 43, .10);

  /* cores das profissionais na agenda — nomes que a Carol já usa.
     As claridades são diferentes de propósito: quem não distingue matiz
     ainda separa os blocos pelo tom, e o nome vai sempre junto. */
  --prof-azul:     #15577F;
  --prof-roxo:     #8768B0;
  --prof-flamingo: #E08A6E;
  --prof-vermelho: #A93A33;
  --prof-verde:    #2E8F5B;
  --prof-neutro:   #948A82;

  --sombra:       0 1px 2px rgba(51,46,43,.05), 0 8px 24px -12px rgba(51,46,43,.18);
  --raio:         10px;
  --arco:         18px 18px 6px 6px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel:        #201D1B;
    --papel-fundo:  #191614;
    --card:         #2A2624;
    --card-2:       #322D2A;
    --cerejeira:    #B49C9C;
    --cerejeira-f:  #CDB0B2;
    --carvalho:     #B79A7C;
    --areia:        #A2958A;
    --dourado:      #C6A77A;
    --dourado-claro:#8A7454;
    --tinta:        #EFEAE3;
    --tinta-2:      #B5ABA2;
    --tinta-3:      #8B8078;
    --linha:        rgba(239, 234, 227, .14);
    --linha-forte:  rgba(239, 234, 227, .28);
    --ok:           #4FBE84;
    --ok-bg:        rgba(79, 190, 132, .14);
    --aviso:        #E0A855;
    --aviso-bg:     rgba(224, 168, 85, .14);
    --critico:      #E8827A;
    --critico-bg:   rgba(232, 130, 122, .14);
    --serie-mag:    #C4718F;
    --serie-ent:    #4E9BD6;
    --serie-sai:    #B87E22;
    --grade:        rgba(239, 234, 227, .12);
    --prof-azul:     #4E9BD6;
    --prof-roxo:     #A98AD0;
    --prof-flamingo: #E8A188;
    --prof-vermelho: #E8827A;
    --prof-verde:    #4FBE84;
    --prof-neutro:   #8B8078;
    --sombra:       0 1px 2px rgba(0,0,0,.28), 0 8px 24px -12px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --papel:        #201D1B;
  --papel-fundo:  #191614;
  --card:         #2A2624;
  --card-2:       #322D2A;
  --cerejeira:    #B49C9C;
  --cerejeira-f:  #CDB0B2;
  --carvalho:     #B79A7C;
  --areia:        #A2958A;
  --dourado:      #C6A77A;
  --dourado-claro:#8A7454;
  --tinta:        #EFEAE3;
  --tinta-2:      #B5ABA2;
  --tinta-3:      #8B8078;
  --linha:        rgba(239, 234, 227, .14);
  --linha-forte:  rgba(239, 234, 227, .28);
  --ok:           #4FBE84;
  --ok-bg:        rgba(79, 190, 132, .14);
  --aviso:        #E0A855;
  --aviso-bg:     rgba(224, 168, 85, .14);
  --critico:      #E8827A;
  --critico-bg:   rgba(232, 130, 122, .14);
  --serie-mag:    #C4718F;
  --serie-ent:    #4E9BD6;
  --serie-sai:    #B87E22;
  --grade:        rgba(239, 234, 227, .12);
  --prof-azul:     #4E9BD6;
  --prof-roxo:     #A98AD0;
  --prof-flamingo: #E8A188;
  --prof-vermelho: #E8827A;
  --prof-verde:    #4FBE84;
  --prof-neutro:   #8B8078;
  --sombra:       0 1px 2px rgba(0,0,0,.28), 0 8px 24px -12px rgba(0,0,0,.5);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--papel-fundo);
  color: var(--tinta);
  font-family: "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }

button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--cerejeira-f); }

:focus-visible {
  outline: 2px solid var(--dourado);
  outline-offset: 2px;
  border-radius: 4px;
}

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

#app {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  height: 100%;
}

/* trilho lateral — a faixa nude vertical é a assinatura da apresentação */
.trilho {
  background: var(--papel);
  border-right: 1px solid var(--linha);
  border-left: 10px solid var(--areia);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding-block: 20px 16px;
  padding-inline: 16px;
  gap: 22px;
}

.marca { display: flex; flex-direction: column; gap: 2px; }

.marca-arco {
  width: 40px; height: 46px;
  border: 1.5px solid var(--dourado);
  border-radius: 20px 20px 3px 3px;
  display: grid; place-items: center;
  margin-bottom: 10px;
  color: var(--cerejeira-f);
  font-family: "Marcellus", Georgia, serif;
  font-size: 17px;
  letter-spacing: .04em;
}

.marca-nome {
  font-family: "Marcellus", Georgia, serif;
  font-size: 17px;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.25;
}

.marca-sub {
  font-family: "Style Script", "Marcellus", cursive;
  font-size: 19px;
  color: var(--cerejeira-f);
  line-height: 1;
  margin-top: 2px;
}

.nav { display: flex; flex-direction: column; gap: 3px; }

.nav-titulo {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta-3);
  padding: 0 10px 6px;
}

.nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  background: none;
  border: 0;
  border-radius: var(--arco);
  color: var(--tinta-2);
  text-align: left;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.nav button:hover { background: var(--card-2); color: var(--tinta); }

.nav button[aria-current="page"] {
  background: var(--card);
  color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--linha), 0 1px 2px rgba(51,46,43,.05);
}

.nav button[aria-current="page"] .nav-ic { color: var(--cerejeira-f); }

.nav-ic { width: 17px; flex: none; display: grid; place-items: center; color: var(--tinta-3); }
.nav-ic svg { width: 16px; height: 16px; }

.trilho-rodape {
  margin-top: auto;
  font-size: 11px;
  color: var(--tinta-3);
  border-top: 1px solid var(--linha);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sinc { display: flex; align-items: center; gap: 6px; }
.sinc-pt { width: 7px; height: 7px; border-radius: 50%; background: var(--tinta-3); flex: none; }
.sinc[data-estado="ok"] .sinc-pt { background: var(--ok); }
.sinc[data-estado="local"] .sinc-pt { background: var(--aviso); }

/* ---------- área principal ---------- */

.palco { overflow-y: auto; background: var(--papel-fundo); }

.cabecalho {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: color-mix(in srgb, var(--papel-fundo) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linha);
  padding: 14px 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.cabecalho-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.eyebrow {
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dourado);
}

.cabecalho h1 {
  font-family: "Marcellus", Georgia, serif;
  font-size: 22px;
  letter-spacing: .01em;
}

.cabecalho-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.conteudo { padding: 22px 24px 64px; display: flex; flex-direction: column; gap: 20px; }

/* ---------- componentes ---------- */

.bloco {
  background: var(--card);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 18px;
}

.bloco-cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.bloco h2 {
  font-family: "Marcellus", Georgia, serif;
  font-size: 15px;
  letter-spacing: .02em;
}

.bloco-nota { font-size: 11.5px; color: var(--tinta-3); }

.grade-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 12px;
}

.kpi {
  background: var(--card);
  border: 1px solid var(--linha);
  border-top: 2px solid var(--cerejeira);
  border-radius: 4px 4px var(--raio) var(--raio);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.kpi-rot {
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.kpi-val {
  font-family: "Marcellus", Georgia, serif;
  font-size: 25px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.kpi-nota { font-size: 11.5px; color: var(--tinta-2); }

.kpi[data-tom="ok"]     { border-top-color: var(--ok); }
.kpi[data-tom="aviso"]  { border-top-color: var(--aviso); }
.kpi[data-tom="critico"]{ border-top-color: var(--critico); }
.kpi[data-tom="dourado"]{ border-top-color: var(--dourado); }

/* tabelas */

.data-cel { white-space: nowrap; }

.tabela-caixa { overflow-x: auto; margin: 0 -18px; padding: 0 18px; }

table { border-collapse: collapse; width: 100%; font-size: 13px; }

thead th {
  text-align: left;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-3);
  padding: 0 10px 8px;
  border-bottom: 1px solid var(--linha-forte);
  white-space: nowrap;
}

tbody td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--linha);
  vertical-align: middle;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr.clicavel { cursor: pointer; }
tbody tr.clicavel:hover td { background: var(--card-2); }

td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.forte { font-weight: 500; }
tfoot td { padding: 10px; border-top: 1px solid var(--linha-forte); font-weight: 500; }

.so-celular { display: none; }

.vazio { padding: 28px 10px; text-align: center; color: var(--tinta-3); font-size: 13px; }

/* pílulas de estado — cor sempre acompanhada de texto */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .03em;
  white-space: nowrap;
  background: var(--card-2);
  color: var(--tinta-2);
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill[data-tom="ok"]      { background: var(--ok-bg);      color: var(--ok); }
.pill[data-tom="aviso"]   { background: var(--aviso-bg);   color: var(--aviso); }
.pill[data-tom="critico"] { background: var(--critico-bg); color: var(--critico); }

/* botões */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--linha-forte);
  background: var(--card);
  color: var(--tinta);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.btn:hover { background: var(--card-2); border-color: var(--dourado); }
.btn svg { width: 15px; height: 15px; }

.btn-principal {
  background: var(--cerejeira-f);
  border-color: var(--cerejeira-f);
  color: #FBFAF6;
}
.btn-principal:hover { background: var(--tinta); border-color: var(--tinta); color: #FBFAF6; }

:root[data-theme="dark"] .btn-principal,
:root:not([data-theme="light"]) .btn-principal { color: #221E1C; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .btn-principal { color: #FBFAF6; } }

.btn-discreto { border-color: transparent; background: transparent; color: var(--tinta-2); padding: 6px 10px; }
.btn-discreto:hover { background: var(--card-2); color: var(--tinta); }
.btn-perigo:hover { border-color: var(--critico); color: var(--critico); }

.btn-mini { padding: 4px 10px; font-size: 12px; }

/* coluna de ação dentro das tabelas de cadastro */
td:has(> .btn-mini) { text-align: right; white-space: nowrap; width: 1%; }

/* formulários */

.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.campo > label {
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.campo input, .campo select, .campo textarea {
  padding: 8px 10px;
  border: 1px solid var(--linha-forte);
  border-radius: 7px;
  background: var(--card);
  width: 100%;
  min-width: 0;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--dourado); }
.campo textarea { resize: vertical; min-height: 62px; }
.campo input[readonly] { background: var(--card-2); color: var(--tinta-2); }

/* dinheiro sempre alinhado à direita e com dígitos de mesma largura,
   para as casas decimais ficarem uma embaixo da outra */
.campo-moeda {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.campo:has(.campo-moeda) > label::after {
  content: " (R$)";
  color: var(--tinta-3);
  letter-spacing: 0;
}

/* aviso curto embaixo de um campo travado */
.dica-campo { font-size: 11px; color: var(--tinta-3); font-style: italic; }

/* quantidade editável dentro da tabela de produtos do serviço */
.celula-num {
  width: 72px; padding: 4px 6px; text-align: right;
  font: inherit; font-size: 12.5px;
  border: 1px solid var(--linha); border-radius: 6px;
  background: var(--card); color: var(--tinta);
}
.celula-num:focus { border-color: var(--dourado); outline: none; }

/* selo do produto que já sofreu reajuste */
.marca-hist {
  display: inline-block; margin-left: 8px; padding: 1px 7px;
  font-size: 10.5px; letter-spacing: .02em;
  border-radius: 999px; border: 1px solid var(--linha);
  background: var(--card-2); color: var(--tinta-3);
}

.grade-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 14px;
}

.grade-form .largo { grid-column: 1 / -1; }

.subtitulo-form {
  grid-column: 1 / -1;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dourado);
  border-top: 1px solid var(--linha);
  padding-top: 14px;
  margin-top: 4px;
}
.subtitulo-form:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

.filtros { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.filtros .campo { min-width: 132px; }
.filtros .busca { min-width: 190px; flex: 1 1 190px; }

/* gaveta lateral (ficha da noiva / lançamento) */

.gaveta-fundo {
  position: fixed;
  inset: 0;
  background: rgba(30, 26, 24, .42);
  z-index: 60;
  display: flex;
  justify-content: flex-end;
}

.gaveta {
  background: var(--card);
  width: min(620px, 100%);
  height: 100%;
  overflow-y: auto;
  border-left: 1px solid var(--linha-forte);
  display: flex;
  flex-direction: column;
}

/* um tremor curto avisa que o caminho de saída são os botões */
@keyframes chamar-atencao {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.gaveta.chamando { animation: chamar-atencao .26s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .gaveta.chamando { animation: none; } }

.gaveta-cabeca {
  position: sticky;
  top: 0;
  background: var(--card);
  border-bottom: 1px solid var(--linha);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 2;
}

.gaveta-cabeca h2 { font-family: "Marcellus", Georgia, serif; font-size: 17px; }
.gaveta-corpo { padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; }

.gaveta-rodape {
  position: sticky;
  bottom: 0;
  background: var(--card);
  border-top: 1px solid var(--linha);
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.resumo-contrato {
  background: var(--card-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.linha-resumo { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.linha-resumo dt { color: var(--tinta-2); }
.linha-resumo.destaque { border-top: 1px solid var(--linha-forte); padding-top: 8px; font-size: 16px; }
.linha-resumo.destaque dt, .linha-resumo.destaque dd { font-family: "Marcellus", Georgia, serif; }
dl, dd { margin: 0; }

/* gráficos */

.graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }

.grafico-legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--tinta-2); margin-bottom: 10px; }
.legenda-item { display: inline-flex; align-items: center; gap: 6px; }
.legenda-cor { width: 10px; height: 10px; border-radius: 2px; flex: none; }

svg.chart { width: 100%; height: auto; display: block; overflow: visible; }
svg.chart text { font-family: "Jost", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.chart-rotulo { font-size: 10px; fill: var(--tinta-3); }
.chart-valor  { font-size: 10.5px; fill: var(--tinta-2); }
.chart-barra  { transition: opacity .15s; }
.chart-barra:hover { opacity: .78; }

/* calendário */

.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }

.cal-dia-nome {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-3);
  text-align: center;
  padding-bottom: 4px;
}

.cal-cel {
  border: 1px solid var(--linha);
  border-radius: 7px;
  min-height: 78px;
  padding: 6px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cal-cel.fora { background: transparent; border-color: transparent; }
.cal-cel.hoje { border-color: var(--dourado); box-shadow: inset 0 0 0 1px var(--dourado); }
.cal-num { font-size: 11px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.cal-cel.hoje .cal-num { color: var(--dourado); }

.cal-eventos { display: flex; flex-direction: column; gap: 3px; }

.cal-evento {
  background: var(--cerejeira);
  color: #2B2522;
  border-radius: 4px;
  padding: 3px 5px;
  font-size: 10.5px;
  line-height: 1.25;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-evento:hover { background: var(--cerejeira-f); color: #FBFAF6; }
.cal-evento[data-tipo="previa"] { background: var(--carvalho); }
.cal-evento[data-tipo="civil"] { background: var(--dourado); color: #FBFAF6; }
.cal-evento[data-tipo="social"],
.cal-evento[data-tipo="curso"],
.cal-evento[data-tipo="reuniao"] { background: var(--serie-ent); color: #FBFAF6; }
.cal-evento[data-tipo="bloqueio"],
.cal-evento[data-tipo="pessoal"] { background: var(--tinta-3); color: #FBFAF6; }

/* a cor de quem atende manda no compromisso marcado à mão (item 17) */
.cal-evento[data-cor="azul"]     { background: var(--prof-azul);     color: #FBFAF6; }
.cal-evento[data-cor="roxo"]     { background: var(--prof-roxo);     color: #FBFAF6; }
.cal-evento[data-cor="flamingo"] { background: var(--prof-flamingo); color: #2B2522; }
.cal-evento[data-cor="vermelho"] { background: var(--prof-vermelho); color: #FBFAF6; }
.cal-evento[data-cor="verde"]    { background: var(--prof-verde);    color: #FBFAF6; }
.cal-evento[data-cor="neutro"]   { background: var(--prof-neutro);   color: #FBFAF6; }
/* bloqueio mantém a cor da profissional, mas riscado, para ler à distância */
.cal-evento.bloqueado {
  background-image: repeating-linear-gradient(
    -45deg, rgba(255,255,255,.28) 0 3px, transparent 3px 7px);
}

/* o dia do calendário abre a agenda completa daquele dia */
.cal-cel.clicavel { cursor: pointer; transition: background .15s, box-shadow .15s; }
.cal-cel.clicavel:hover { background: var(--card-2); box-shadow: inset 0 0 0 1px var(--dourado); }
.cal-cel.clicavel:focus-visible { outline: 2px solid var(--dourado); outline-offset: -2px; }

/* ---------- contrato: opções e prévia ---------- */

.opcoes-contrato { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }

.opcao-contrato {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: start; gap: 9px;
  padding: 9px 11px; cursor: pointer;
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--card); font-size: 12.5px;
  transition: border-color .15s, background .15s;
}
.opcao-contrato:hover { border-color: var(--dourado); }
.opcao-contrato:has(input:checked) { background: var(--card-2); border-color: var(--dourado-claro); }
.opcao-contrato input { margin: 2px 0 0; accent-color: var(--dourado); }
.opcao-contrato strong { font-weight: 500; color: var(--tinta); }
.opcao-contrato .cresce { min-width: 0; }

/* o documento como vai sair no papel */
.previa-contrato {
  max-height: 460px; overflow: auto;
  padding: 22px 26px;
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--card);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px; line-height: 1.55; color: var(--tinta);
  text-align: justify;
}
.previa-contrato .ct-titulo {
  margin: 0 0 14px; text-align: center; font-size: 13.5px; font-weight: 600;
  letter-spacing: .02em; padding-bottom: 10px;
  border-bottom: 1px solid var(--dourado-claro);
}
.previa-contrato .ct-secao {
  margin: 16px 0 7px; font-size: 11.5px; font-weight: 600;
  letter-spacing: .04em; color: var(--tinta);
}
.previa-contrato p { margin: 0 0 7px; }
.previa-contrato .ct-sub { padding-left: 14px; }
.previa-contrato .ct-num { font-weight: 600; }
.previa-contrato .ct-item {
  padding-left: 14px; color: var(--tinta-3);
  font-family: "Jost", system-ui, sans-serif; font-size: 11.5px; text-align: left;
}
.previa-contrato .ct-item.on { color: var(--tinta); }

@media (max-width: 560px) {
  .opcoes-contrato { grid-template-columns: 1fr; }
  .previa-contrato { padding: 16px 15px; max-height: 340px; }
}

/* ---------- detalhamento do dia ---------- */

.detalhe-dia { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }

.detalhe-item {
  border: 1px solid var(--linha);
  border-left: 3px solid var(--prof-neutro);
  border-radius: 4px var(--raio) var(--raio) 4px;
  background: var(--card-2);
  padding: 13px 15px;
}
.detalhe-item[data-cor="azul"]     { border-left-color: var(--prof-azul); }
.detalhe-item[data-cor="roxo"]     { border-left-color: var(--prof-roxo); }
.detalhe-item[data-cor="flamingo"] { border-left-color: var(--prof-flamingo); }
.detalhe-item[data-cor="vermelho"] { border-left-color: var(--prof-vermelho); }
.detalhe-item[data-cor="verde"]    { border-left-color: var(--prof-verde); }

.detalhe-cabeca { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 11px; }
.detalhe-cabeca .cresce { flex: 1; min-width: 0; }
.detalhe-cabeca h3 {
  font-family: "Marcellus", Georgia, serif; font-size: 15.5px; line-height: 1.25;
  color: var(--tinta); margin-bottom: 1px;
}

.detalhe-dados { margin: 0; display: flex; flex-direction: column; gap: 5px; }
.detalhe-par {
  display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 10px;
  font-size: 12.5px; align-items: baseline;
}
.detalhe-par dt { color: var(--tinta-3); }
.detalhe-par dd { margin: 0; color: var(--tinta); overflow-wrap: anywhere; }

.detalhe-obs {
  margin: 11px 0 0; padding-top: 10px; border-top: 1px solid var(--linha);
  font-size: 12.5px; color: var(--tinta-2); line-height: 1.5;
}

.detalhe-tempo { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linha); }
.tempo.compacta { padding-left: 0; margin-top: 6px; }
.tempo.compacta::before { left: 41px; }
.tempo.compacta .tempo-item { padding: 4px 0; grid-template-columns: 38px 1fr; gap: 14px; }
.tempo.compacta .tempo-item::before { left: 37px; top: 9px; width: 8px; height: 8px; }
.tempo.compacta .tempo-hora { font-size: 12px; }
.tempo.compacta .tempo-titulo { font-size: 12px; }

@media (max-width: 560px) {
  .detalhe-dia { grid-template-columns: 1fr; }
  .detalhe-par { grid-template-columns: 1fr; gap: 0; }
  .detalhe-par dt { font-size: 11px; }
}

/* ---------- agenda por pessoa: uma coluna por recurso ---------- */

.agenda-colunas {
  display: grid;
  grid-template-columns: 54px repeat(var(--colunas, 4), minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--card);
}

.col-agenda { min-width: 0; border-left: 1px solid var(--linha); }
.col-agenda:first-child { border-left: 0; }

.col-cabeca {
  display: flex; flex-direction: column; gap: 1px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--linha);
  background: var(--card-2);
  border-top: 3px solid transparent;
  min-height: 46px;
}
.col-cabeca[data-cor="azul"]     { border-top-color: var(--prof-azul); }
.col-cabeca[data-cor="roxo"]     { border-top-color: var(--prof-roxo); }
.col-cabeca[data-cor="flamingo"] { border-top-color: var(--prof-flamingo); }
.col-cabeca[data-cor="vermelho"] { border-top-color: var(--prof-vermelho); }
.col-cabeca[data-cor="verde"]    { border-top-color: var(--prof-verde); }

.col-nome {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.col-nota { font-size: 10.5px; color: var(--tinta-3); }

/* o ponto colorido que identifica a coluna de relance */
.col-ponto {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--prof-neutro);
}
.col-cabeca[data-cor="azul"] .col-ponto     { background: var(--prof-azul); }
.col-cabeca[data-cor="roxo"] .col-ponto     { background: var(--prof-roxo); }
.col-cabeca[data-cor="flamingo"] .col-ponto { background: var(--prof-flamingo); }
.col-cabeca[data-cor="vermelho"] .col-ponto { background: var(--prof-vermelho); }
.col-cabeca[data-cor="verde"] .col-ponto    { background: var(--prof-verde); }
.regua .col-nome { color: var(--tinta-3); font-size: 10px; letter-spacing: .06em; }

.col-avulsos {
  display: flex; flex-direction: column; gap: 3px;
  padding: 5px; border-bottom: 1px solid var(--linha); background: var(--card-2);
}

.col-corpo { position: relative; }

.marca-hora {
  position: absolute; right: 8px; transform: translateY(-50%);
  font-size: 10.5px; color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}
.linha-hora { position: absolute; left: 0; right: 0; height: 1px; background: var(--grade); }

.cartao-agenda {
  position: absolute; left: 3px; right: 3px;
  display: flex; flex-direction: column; gap: 1px;
  padding: 4px 7px; overflow: hidden;
  border: 0; border-left: 3px solid rgba(0,0,0,.18);
  border-radius: 4px;
  background: var(--prof-neutro); color: #FBFAF6;
  font: inherit; font-size: 11px; line-height: 1.3;
  text-align: left; cursor: pointer;
}
.cartao-agenda:hover { filter: brightness(1.08); }
.cartao-agenda[data-cor="azul"]     { background: var(--prof-azul); }
.cartao-agenda[data-cor="roxo"]     { background: var(--prof-roxo); }
.cartao-agenda[data-cor="flamingo"] { background: var(--prof-flamingo); color: #2B2522; }
.cartao-agenda[data-cor="vermelho"] { background: var(--prof-vermelho); }
.cartao-agenda[data-cor="verde"]    { background: var(--prof-verde); }
.cartao-agenda.bloqueado {
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.26) 0 4px, transparent 4px 9px);
}
.cartao-agenda.avulso { position: static; height: auto; }

.cartao-hora { font-variant-numeric: tabular-nums; opacity: .85; font-size: 10px; }
.cartao-titulo { overflow: hidden; text-overflow: ellipsis; }
.cartao-selo {
  align-self: flex-start; margin-top: 1px;
  padding: 0 6px; border-radius: 999px;
  background: rgba(255,255,255,.24); font-size: 9.5px; letter-spacing: .04em;
}
.cartao-nota { opacity: .82; font-size: 10px; overflow: hidden; text-overflow: ellipsis; }

/* encaixe: dois no mesmo horário dividem a largura da coluna */
.cartao-agenda.estreito { font-size: 10px; padding: 3px 5px; }
.cartao-agenda.estreito .cartao-hora { font-size: 9px; }
.cartao-agenda.estreito .cartao-selo { font-size: 9px; padding: 0 4px; }

/* aviso de choque de horário na ficha do compromisso */
.aviso-choque {
  margin-top: 16px; padding: 12px 14px;
  border: 1px solid var(--aviso); border-left-width: 3px;
  border-radius: 4px var(--raio) var(--raio) 4px;
  background: var(--aviso-bg);
  font-size: 12.5px;
}
.aviso-choque strong { display: block; font-weight: 500; color: var(--tinta); margin-bottom: 6px; }
.aviso-choque ul { margin: 0 0 8px; padding-left: 18px; }
.aviso-choque li { margin-bottom: 5px; }
.aviso-choque .bloco-nota { margin-top: 2px; }
.aviso-choque[data-tom="critico"] { border-color: var(--critico); background: var(--critico-bg); }
.aviso-choque[data-tom="critico"] strong { color: var(--critico); }

.campo-data-mini { min-width: 0; }
.campo-data-mini > label { display: none; }
.campo-data-mini input { padding: 4px 8px; font-size: 12px; }

/* no celular as colunas viram blocos, um embaixo do outro */
@media (max-width: 720px) {
  .agenda-colunas { grid-template-columns: 1fr; }
  .col-agenda { border-left: 0; border-top: 1px solid var(--linha); }
  .col-agenda:first-child { display: none; }        /* a régua de horas não cabe */
  .col-corpo { height: auto !important; display: flex; flex-direction: column; gap: 4px; padding: 6px; }
  .linha-hora { display: none; }
  .cartao-agenda { position: static; height: auto !important; min-height: 0; padding: 7px 10px; font-size: 12px; }
  .cartao-hora { font-size: 11px; }
}

/* aviso de coluna vazia: some no computador, aparece no celular */
.col-vazia { display: none; }
@media (max-width: 720px) {
  .col-vazia { display: block; padding: 6px 4px; font-size: 11.5px; color: var(--tinta-3); }
}

/* etiqueta com o nome da profissional */
.etiqueta-prof {
  display: inline-block; padding: 1px 9px; border-radius: 999px;
  font-size: 11px; letter-spacing: .02em; color: #FBFAF6;
  background: var(--prof-neutro);
}
.etiqueta-prof[data-cor="azul"]     { background: var(--prof-azul); }
.etiqueta-prof[data-cor="roxo"]     { background: var(--prof-roxo); }
.etiqueta-prof[data-cor="flamingo"] { background: var(--prof-flamingo); color: #2B2522; }
.etiqueta-prof[data-cor="vermelho"] { background: var(--prof-vermelho); }
.etiqueta-prof[data-cor="verde"]    { background: var(--prof-verde); }

/* módulo de mensagens */
.texto-msg {
  width: 100%; min-height: 220px; resize: vertical;
  padding: 12px 14px; border: 1px solid var(--linha-forte); border-radius: var(--raio);
  background: var(--card); color: var(--tinta);
  font-size: 13.5px; line-height: 1.6;
}
.texto-msg:focus { border-color: var(--dourado); outline: none; }
.previa-msg {
  margin: 0; padding: 14px 16px; border-radius: var(--raio);
  background: var(--card-2); border: 1px solid var(--linha);
  font-family: inherit; font-size: 13px; line-height: 1.6; color: var(--tinta-2);
  white-space: pre-wrap; max-height: 320px; overflow: auto;
}

/* textos explicativos longos */
.texto-doc { margin: 0 0 12px; font-size: 13.5px; line-height: 1.65; color: var(--tinta-2); max-width: 74ch; }
.passos { margin: 0 0 12px; padding-left: 20px; max-width: 74ch; }
.passos li { font-size: 13.5px; line-height: 1.65; color: var(--tinta-2); margin-bottom: 10px; }
.lista-doc { margin: 0; padding-left: 20px; max-width: 74ch; }
.lista-doc li { font-size: 13.5px; line-height: 1.6; color: var(--tinta-2); margin-bottom: 7px; }

/* prévia da linha do tempo do dia da noiva */
.tempo { list-style: none; margin: 0; padding: 0 0 0 4px; position: relative; }
.tempo::before {
  content: ""; position: absolute; left: 47px; top: 8px; bottom: 8px;
  width: 1px; background: var(--dourado-claro);
}
.tempo-item {
  position: relative; display: grid;
  grid-template-columns: 44px 1fr; gap: 18px; align-items: baseline;
  padding: 7px 0;
}
.tempo-item::before {
  content: ""; position: absolute; left: 43px; top: 12px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--card); border: 1.5px solid var(--dourado);
}
.tempo-item[data-tipo="noiva"]::before { background: var(--cerejeira-f); border-color: var(--cerejeira-f); }
.tempo-hora { text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; }
.tempo-item[data-tipo="noiva"] .tempo-hora,
.tempo-item[data-tipo="noiva"] .tempo-titulo { color: var(--tinta); }
.tempo-item[data-tipo="acomp"] .tempo-hora,
.tempo-item[data-tipo="acomp"] .tempo-titulo { color: var(--tinta-2); font-size: 12.5px; }

/* linha de acompanhante: nome, parentesco, make e cabelo */
.linha-acomp { flex-wrap: wrap; }
.linha-acomp input[type="time"] { width: 104px; }
.rotulo-mini {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-3); align-self: center;
}

/* escolha de quem atende, na ficha do compromisso */
.chips-escolha { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-escolha {
  padding: 5px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linha-forte);
  background: var(--card); color: var(--tinta-2);
  font-size: 12.5px;
  transition: background .15s, color .15s, border-color .15s;
}
.chip-escolha:hover { border-color: var(--dourado); }
.chip-escolha.on { color: #FBFAF6; border-color: transparent; background: var(--prof-neutro); }
.chip-escolha.on[data-cor="azul"]     { background: var(--prof-azul); }
.chip-escolha.on[data-cor="roxo"]     { background: var(--prof-roxo); }
.chip-escolha.on[data-cor="flamingo"] { background: var(--prof-flamingo); color: #2B2522; }
.chip-escolha.on[data-cor="vermelho"] { background: var(--prof-vermelho); }
.chip-escolha.on[data-cor="verde"]    { background: var(--prof-verde); }

/* abas internas */

.abas { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--linha); margin-bottom: 16px; }
.abas button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 8px 12px; color: var(--tinta-2); cursor: pointer;
}
.abas button:hover { color: var(--tinta); }
.abas button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--cerejeira-f); }

/* mensagens */

.aviso-barra {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 14px;
  border-radius: var(--raio);
  background: var(--aviso-bg);
  color: var(--aviso);
  font-size: 12.5px;
  border: 1px solid color-mix(in srgb, var(--aviso) 26%, transparent);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  background: var(--tinta);
  color: var(--papel);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  z-index: 90;
  box-shadow: var(--sombra);
}

.lista-alerta { display: flex; flex-direction: column; gap: 8px; }

.item-alerta {
  text-align: left;
  font: inherit;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--linha);
  border-left: 3px solid var(--cerejeira);
  border-radius: 4px var(--raio) var(--raio) 4px;
  background: var(--card-2);
  font-size: 12.5px;
  cursor: pointer;
}
.item-alerta:hover { border-color: var(--dourado); border-left-color: var(--dourado); }
.item-alerta[data-tom="critico"] { border-left-color: var(--critico); }
.item-alerta[data-tom="aviso"]   { border-left-color: var(--aviso); }
.item-alerta .cresce { flex: 1; min-width: 0; }
.item-alerta strong { font-weight: 500; }

/* aviso automático: o texto é clicável, o "já resolvi" fica ao lado */
.aviso-auto { cursor: default; align-items: flex-start; }
.alerta-ir {
  font: inherit; font-size: 12.5px; text-align: left;
  background: none; border: 0; padding: 0; color: inherit; cursor: pointer;
}
.alerta-ir:hover strong { color: var(--cerejeira-f); }
.aviso-auto .bloco-nota { margin-top: 2px; }

/* interruptor de texto usado nos cadastros */
.liga { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tinta-2); }
.liga input { accent-color: var(--dourado); }
.cad-extra.cresce { flex: 1; min-width: 160px; }

.duas-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: start; }

.editor-linha { display: flex; align-items: center; gap: 8px; }
.editor-linha input { max-width: 120px; text-align: right; font-variant-numeric: tabular-nums; }


/* ---------- seletor de período do painel ---------- */

.barra-periodo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.abas-periodo {
  display: inline-flex;
  background: var(--card-2);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}

.abas-periodo button {
  border: 0;
  background: none;
  color: var(--tinta-2);
  padding: 6px 15px;
  border-radius: 999px;
  cursor: pointer;
}
.abas-periodo button:hover { color: var(--tinta); }
.abas-periodo button[aria-pressed="true"] {
  background: var(--card);
  color: var(--tinta);
  box-shadow: 0 1px 2px rgba(51,46,43,.08);
}

.nav-periodo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.periodo-rotulo {
  font-family: "Marcellus", Georgia, serif;
  font-weight: 400;
  font-size: 15px;
  min-width: 150px;
  text-align: center;
}

/* ---------- empresa x pessoal ---------- */

.duas-esferas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }

.esfera {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--card-2);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.esfera-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.esfera-cabeca strong { font-weight: 500; }

.esfera-saldo {
  font-family: "Marcellus", Georgia, serif;
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.esfera-saldo[data-tom="ok"] { color: var(--ok); }
.esfera-saldo[data-tom="critico"] { color: var(--critico); }

.esfera-linhas { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.linha-resumo.previsto { color: var(--aviso); border-top: 1px dashed var(--linha-forte); padding-top: 4px; margin-top: 2px; }

/* ---------- jornada da cliente ---------- */

.jornada-resumo { display: flex; flex-direction: column; gap: 4px; min-width: 130px; }

.barra-prog {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: var(--card-2);
  box-shadow: inset 0 0 0 1px var(--linha);
  overflow: hidden;
}
.barra-prog.grande { height: 7px; flex: 1; min-width: 120px; }

.barra-prog-ativa { display: block; height: 100%; background: var(--cerejeira-f); border-radius: 999px; }
.barra-prog-ativa[data-tom="ok"] { background: var(--ok); }
.barra-prog-ativa[data-tom="aviso"] { background: var(--aviso); }

.jornada-topo {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--linha);
}

.jornada-contagem { font-family: "Marcellus", Georgia, serif; font-weight: 400; font-size: 16px; }

.etapas { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

.etapa {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--linha);
  position: relative;
}
.etapa:last-child { border-bottom: 0; }

/* linha que liga as etapas, como uma trilha */
.etapa::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 34px;
  bottom: -4px;
  width: 1px;
  background: var(--linha);
}
.etapa:last-child::before { display: none; }

.etapa-marca {
  width: 27px; height: 27px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--linha-forte);
  background: var(--card);
  color: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  margin-top: 2px;
  position: relative;
  z-index: 1;
  transition: background .15s, border-color .15s;
}
.etapa-marca:hover { border-color: var(--dourado); }
.etapa-marca svg { width: 14px; height: 14px; }

.etapa[data-feito="true"] .etapa-marca {
  background: var(--cerejeira-f);
  border-color: var(--cerejeira-f);
  color: #FBFAF6;
}

.etapa-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }

.etapa-cabeca {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  background: none;
  border: 0;
  padding: 2px 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
}
.etapa-cabeca:hover .etapa-txt strong { color: var(--dourado); }
.etapa-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.etapa-txt strong { font-weight: 500; }
.etapa[data-feito="true"] .etapa-txt strong { color: var(--cerejeira-f); }

.etapa-num {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.etapa-marcas { letter-spacing: 0; }

.etapa-seta { display: grid; place-items: center; transition: transform .15s; }
.etapa-seta svg { width: 14px; height: 14px; }
.etapa[data-aberta="true"] .etapa-seta { transform: rotate(180deg); }

.etapa-detalhe { display: none; flex-direction: column; gap: 10px; }
.etapa[data-aberta="true"] .etapa-detalhe { display: flex; }

/* ---------- fotos do acompanhamento ---------- */

.galeria { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.foto {
  position: relative;
  margin: 0;
  width: 74px; height: 74px;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid var(--linha);
  background: var(--card-2);
}
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.foto-remover {
  position: absolute;
  top: 3px; right: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 0;
  background: rgba(30, 26, 24, .62);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.foto-remover:hover { background: var(--critico); }

.foto-add { height: 74px; border-style: dashed; }

/* ---------- editor de custos fixos ---------- */

.lista-custos { display: flex; flex-direction: column; gap: 6px; }

.editor-linha.custo {
  gap: 8px;
  padding: 4px 4px 4px 10px;
  border-radius: 7px;
  border-left: 3px solid var(--cerejeira);
}
.editor-linha.custo[data-esfera="PF"] { border-left-color: var(--carvalho); }
.editor-linha.custo:hover { background: var(--card-2); }

.custo-nome {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  text-align: left;
  border: 1px solid transparent;
  background: none;
  padding: 6px 8px;
  border-radius: 6px;
}
.custo-nome:hover { border-color: var(--linha); }
.custo-nome:focus { border-color: var(--dourado); background: var(--card); outline: none; }

.custo-esfera {
  flex: none;
  padding: 6px 8px;
  border: 1px solid var(--linha);
  border-radius: 6px;
  background: var(--card);
  font-size: 12.5px;
}


/* ---------- orçamento e previsto: o que ainda não aconteceu ---------- */

tbody tr.sit-previsto td,
tbody tr.sit-orcamento td { color: var(--tinta-2); }

tbody tr.sit-previsto td:first-child,
tbody tr.sit-orcamento td:first-child {
  box-shadow: inset 3px 0 0 -1px var(--aviso);
}
tbody tr.sit-orcamento td:first-child { box-shadow: inset 3px 0 0 -1px var(--tinta-3); }
tbody tr.sit-orcamento td { font-style: italic; }

/* ---------- cadastros ---------- */

.lista-cadastro { display: flex; flex-direction: column; gap: 10px; }

.cad-item {
  border: 1px solid var(--linha);
  border-left: 3px solid var(--cerejeira);
  border-radius: 4px var(--raio) var(--raio) 4px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--card);
}
.cad-item.simples { flex-direction: row; align-items: center; gap: 8px; }

.cad-cabeca { display: flex; align-items: center; gap: 8px; }

.cad-nome {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid transparent;
  background: none;
  padding: 6px 8px;
  border-radius: 6px;
  font-weight: 500;
}
.cad-nome:hover { border-color: var(--linha); }
.cad-nome:focus { border-color: var(--dourado); background: var(--card-2); outline: none; }

.cad-extra {
  flex: 1 1 130px;
  min-width: 0;
  border: 1px solid var(--linha);
  background: var(--card);
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12.5px;
}

.subs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--card-2);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 3px 5px 3px 11px;
  font-size: 12px;
}
.chip button {
  width: 18px; height: 18px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--tinta-3);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 14px;
  line-height: 1;
}
.chip button:hover { background: var(--critico-bg); color: var(--critico); }

.chip-nova {
  border: 1px dashed var(--linha-forte);
  background: none;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  width: 150px;
}
.chip-nova:focus { border-style: solid; border-color: var(--dourado); outline: none; }

/* ---------- área de arquivo ---------- */

.area-arquivo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 26px 18px;
  border: 1.5px dashed var(--linha-forte);
  border-radius: var(--raio);
  background: var(--card-2);
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: center;
}
.area-arquivo:hover, .area-arquivo.sobre { border-color: var(--dourado); background: var(--card); }
.area-arquivo strong { font-weight: 500; }


/* ---------- tela de entrada ---------- */

.entrada-fundo {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--papel-fundo);
  display: grid;
  place-items: center;
  padding: 24px 16px;
  overflow-y: auto;
}

.entrada {
  width: min(560px, 100%);
  background: var(--card);
  border: 1px solid var(--linha);
  border-top: 4px solid var(--areia);
  border-radius: 4px 4px var(--raio) var(--raio);
  padding: 30px 26px 26px;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.entrada-marca { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.entrada-marca .marca-arco { margin-bottom: 12px; }

.entrada-pergunta {
  margin: 0;
  font-family: "Marcellus", Georgia, serif;
  font-size: 17px;
  border-top: 1px solid var(--linha);
  padding-top: 18px;
}

.entrada-perfis { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 10px; }

.perfil-cartao {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 15px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--arco);
  background: var(--card);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.perfil-cartao:hover { border-color: var(--dourado); background: var(--card-2); }
.perfil-cartao strong { font-weight: 500; }

.perfil-tranca {
  position: absolute;
  top: 10px; right: 12px;
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--dourado);
  border: 1px solid var(--dourado);
  border-radius: 999px;
  padding: 1px 6px;
}

.entrada-pin {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--linha);
  padding-top: 16px;
}

.campo-pin {
  width: 120px;
  padding: 10px 14px;
  border: 1px solid var(--linha-forte);
  border-radius: 8px;
  background: var(--card);
  font-size: 18px;
  letter-spacing: .4em;
  text-align: center;
}
.campo-pin:focus { border-color: var(--dourado); outline: none; }

.pin-erro { font-size: 12px; color: var(--critico); }

/* ---------- quem está usando ---------- */

.quem-usa {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--card);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.quem-usa:hover { border-color: var(--dourado); }
.quem-usa .cresce { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.quem-usa strong { font-weight: 500; font-size: 12px; }

.quem-inicial {
  width: 26px; height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--cerejeira);
  color: #2B2522;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 500;
}

/* ---------- matriz de permissões ---------- */

.perfil-bloco { border-left: 3px solid var(--cerejeira); border-radius: 4px var(--raio) var(--raio) 4px; }

.matriz { font-size: 13px; }
.matriz th { vertical-align: bottom; }
.matriz td { padding: 7px 10px; }
.matriz tbody tr[data-vazio="true"] td { opacity: .55; }
.matriz tbody tr:hover td { background: var(--card-2); }

.matriz input[type="checkbox"] {
  width: 17px; height: 17px;
  accent-color: var(--cerejeira-f);
  cursor: pointer;
}

.linha-toggle {
  background: none;
  border: 0;
  padding: 2px 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  border-bottom: 1px dashed transparent;
}
.linha-toggle:hover { border-bottom-color: var(--dourado); color: var(--dourado); }

.nao-aplica { color: var(--tinta-3); }

.pin-campo { max-width: 84px; text-align: center; letter-spacing: .1em; }

/* ---------- celular ---------- */

@media (max-width: 560px) {
  /* colunas secundárias saem para a tabela caber na tela */
  .col-op { display: none; }

  .so-celular { display: block; margin-top: 5px; }

  .barra-periodo { gap: 10px; }
  .nav-periodo { width: 100%; justify-content: space-between; }
  .periodo-rotulo { min-width: 0; flex: 1; font-size: 14px; }
  .esfera-saldo { font-size: 20px; }
  .jornada-topo { gap: 10px; }
  .etapa-detalhe .grade-form { grid-template-columns: 1fr; }
  .entrada { padding: 24px 18px 20px; }
  .entrada-perfis { grid-template-columns: 1fr; }
  .matriz { font-size: 12px; }
  .matriz td, .matriz th { padding: 8px 6px; }
  .cad-item.simples { flex-wrap: wrap; }
  .cad-nome { flex: 1 1 100%; }
  .filtros .campo { min-width: 120px; flex: 1 1 120px; }
  .filtros > div[style*="margin-left:auto"] { width: 100%; }
  .editor-linha.custo { flex-wrap: wrap; }
  .custo-nome { flex: 1 1 100%; }
  .custo-esfera { flex: 1 1 auto; }
  .editor-linha.custo input[type="number"] { flex: 1 1 auto; max-width: none; }

  /* a data encurta: 28/11/26 */
  .data-cel .sec { display: none; }
  table { font-size: 12.5px; }
  tbody td { padding: 11px 7px; }

  /* o calendário vira um mapa do mês: número do dia + um ponto por atendimento.
     Os nomes ficam na lista de compromissos logo abaixo. */
  .cal-eventos { flex-direction: row; flex-wrap: wrap; gap: 3px; margin-top: auto; }
  .cal-evento {
    width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
    font-size: 0; line-height: 0; overflow: hidden; text-indent: -999px;
  }
  .cal-evento { position: relative; }
  /* o ponto é pequeno, mas a área de toque à volta dele não */
  .cal-evento::after { content: ""; position: absolute; inset: -10px; }
  .cal-cel { min-height: 46px; }
  .cal-num { font-size: 12px; }

  /* área de toque confortável */
  .pill { padding: 3px 7px; font-size: 10.5px; }
  thead th { font-size: 9.5px; letter-spacing: .08em; padding: 0 7px 8px; }
  .btn { padding: 9px 15px; }
  .btn-mini { padding: 8px 13px; }
  .nav button { padding: 10px 12px; }
  .campo input, .campo select, .campo textarea { padding: 10px 11px; font-size: 16px; }
  tbody td { padding: 11px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- responsivo ---------- */

@media (max-width: 860px) {
  #app { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }

  .trilho {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    border-right: 0;
    border-bottom: 1px solid var(--linha);
    border-left: 0;
    border-top: 6px solid var(--areia);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 16px;
  }
  .marca-arco, .nav-titulo, .trilho-rodape, .marca-sub { display: none; }
  .marca-nome { font-size: 13px; white-space: nowrap; }
  .nav { flex-direction: row; gap: 4px; }
  .nav button { padding: 7px 11px; white-space: nowrap; }
  .cabecalho { padding: 12px 16px; }
  .conteudo { padding: 16px 16px 56px; }
  .bloco { padding: 14px; }
  .tabela-caixa { margin: 0 -14px; padding: 0 14px; }
  .kpi-val { font-size: 21px; }
  .calendario { gap: 3px; }
  .cal-cel { min-height: 62px; padding: 4px; }
  .cal-eventos { display: flex; flex-direction: column; gap: 3px; }

.cal-evento { font-size: 9.5px; }
}

/* ---------- confirmação dentro da página ---------- */
.confirma-fundo {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(30, 26, 24, .5);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.confirma {
  background: var(--card); color: var(--tinta);
  border: 1px solid var(--linha-forte); border-radius: var(--raio);
  box-shadow: var(--sombra);
  width: min(440px, 100%); padding: 20px 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.confirma h3 { margin: 0; font-family: "Marcellus", Georgia, serif; font-weight: 400; font-size: 18px; }
.confirma p { margin: 0; white-space: pre-line; color: var(--tinta-2); line-height: 1.5; }
.confirma-botoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.btn-perigo-cheio { background: var(--critico); border-color: var(--critico); color: #fff; }
.btn-perigo-cheio:hover { background: var(--critico); border-color: var(--critico); color: #fff; filter: brightness(.92); }
.btn-perigo { color: var(--critico); }

/* ---------- cadastros com botões explícitos ---------- */
.cad-busca {
  width: 100%; margin: 0 0 12px; padding: 8px 12px;
  border: 1px solid var(--linha-forte); border-radius: 8px;
  background: var(--card); color: var(--tinta); font: inherit;
}
.cad-linha {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  border: 1px solid var(--linha); border-left: 3px solid var(--cerejeira);
  border-radius: 4px var(--raio) var(--raio) 4px;
  padding: 9px 12px; background: var(--card);
}
.cad-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cad-texto strong { font-weight: 500; overflow-wrap: anywhere; }
.cad-acoes { display: flex; gap: 6px; flex: none; }
.cad-editavel { border-color: var(--linha) !important; background: var(--card) !important; }
.bloco-cabeca > div > .bloco-nota { display: block; margin-top: 2px; }

/* ---------- importação ---------- */
.passos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; color: var(--tinta-2); font-size: 13px; }
.aceitos { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--card-2); }
.aceitos summary { cursor: pointer; padding: 10px 14px; font-size: 13px; }
.aceitos-corpo { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.aceitos-colunas { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.aceitos-colunas td { padding: 4px 6px 4px 0; border-bottom: 1px solid var(--linha); vertical-align: top; }
.aceitos-grupo { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.previa-importacao { display: flex; flex-direction: column; gap: 8px; }
.linha-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }

/* ---------- parceiras ---------- */
.aviso-info {
  padding: 12px 16px; border-radius: var(--raio);
  background: var(--card-2); border: 1px solid var(--linha);
  border-left: 3px solid var(--dourado); font-size: 13px; line-height: 1.5;
}
.etiqueta-origem {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 10.5px; letter-spacing: .02em; background: var(--card-2); color: var(--tinta-3);
  border: 1px solid var(--linha);
}
@media (max-width: 640px) {
  .cad-linha { flex-wrap: wrap; }
  .cad-acoes { width: 100%; justify-content: flex-end; }
}

/* ---------- deslocamento por local ---------- */
.cad-desloc-rot { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; font-size: 11.5px; color: var(--tinta-2); }
.cad-desloc { width: 110px; flex: 0 0 110px; text-align: right; }
.cad-km { width: 72px; flex: 0 0 72px; text-align: right; }

/* ---------- visualização do PDF ---------- */
.pdf-visual-fundo {
  position: fixed; inset: 0; z-index: 85;
  background: rgba(30, 26, 24, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.pdf-visual {
  background: var(--card); color: var(--tinta);
  border: 1px solid var(--linha); border-radius: var(--raio);
  width: min(920px, 100%); height: min(92vh, 1100px);
  display: flex; flex-direction: column; overflow: hidden;
}
.pdf-visual-cabeca {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--linha);
}
.pdf-visual-cabeca strong { font-size: 13px; overflow-wrap: anywhere; }
.pdf-visual-quadro { flex: 1; width: 100%; border: 0; background: #fff; }
@media (max-width: 640px) {
  .cad-desloc-rot { flex: 1 1 100%; }
  .cad-desloc, .cad-km { flex: 1 1 auto; width: auto; }
}

/* ---- v18: histórico, cláusulas próprias e adendos ---- */
.hist-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hist-item { border: 1px solid var(--linha); border-left: 3px solid var(--dourado-claro); border-radius: 4px var(--raio) var(--raio) 4px; padding: 10px 12px; background: var(--card); }
.hist-cabeca { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.hist-cabeca strong { font-weight: 500; }
.hist-detalhe { margin: 6px 0 0; font-size: 12.5px; color: var(--tinta-2); }
.hist-tabela { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12.5px; }
.hist-tabela th { text-align: left; font-weight: 500; color: var(--tinta-3); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding: 4px 6px; border-bottom: 1px solid var(--linha); }
.hist-tabela td { padding: 5px 6px; border-bottom: 1px solid var(--linha); vertical-align: top; overflow-wrap: anywhere; }
.hist-tabela tr:last-child td { border-bottom: 0; }
.hist-de { color: var(--tinta-3); text-decoration: line-through; text-decoration-color: var(--linha-forte); }
.hist-para { color: var(--tinta); }
.ed-clausulas { display: flex; flex-direction: column; gap: 8px; }
.ed-cl { border: 1px solid var(--linha); border-radius: var(--raio); padding: 8px 10px; background: var(--card); display: flex; flex-direction: column; gap: 6px; }
.ed-cl[data-tipo="titulo"], .ed-cl[data-tipo="secao"] { background: var(--card-2); }
.ed-cl-cabeca { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ed-cl-texto { width: 100%; min-height: 44px; resize: vertical; font: inherit; font-size: 13px; line-height: 1.5; padding: 7px 9px; border: 1px solid var(--linha-forte); border-radius: 6px; background: var(--papel); color: var(--tinta); }
.ed-cl-tipo { align-self: flex-start; font: inherit; font-size: 12.5px; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--linha-forte); background: var(--papel); color: var(--tinta); }
.lista-adendos { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lista-adendos li { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--linha); border-radius: var(--raio); padding: 8px 10px; }
.lista-adendos .bloco-nota { overflow-wrap: anywhere; }
.dre-tabela td.num, .dre-tabela th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dre-tabela .dre-av { color: var(--tinta-3); width: 96px; }
.dre-tabela tr.dre-total td { font-weight: 500; background: var(--card-2); border-top: 1px solid var(--linha-forte); }
.dre-tabela tr.dre-cat td:first-child { padding-left: 30px; color: var(--tinta); }
.dre-tabela tr.dre-cat td { background: color-mix(in srgb, var(--card-2) 45%, transparent); }
.dre-tabela tr.dre-sub td { font-size: 12px; color: var(--tinta-2); }
.dre-tabela tr.dre-sub td:first-child { padding-left: 52px; }
.dre-tabela tr.dre-memo td { font-style: italic; color: var(--tinta-2); border-top: 1px dashed var(--linha-forte); }
.dre-abre { background: none; border: 0; padding: 0; font: inherit; color: var(--tinta); cursor: pointer; text-align: left; }
.dre-abre:hover { color: var(--dourado); }
.dre-seta { display: inline-block; width: 12px; color: var(--dourado); }
.usuario-linha { flex-wrap: wrap; }
.usuario-email { font-size: 12.5px; color: var(--tinta-2); flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }

/* ---- v19: tema claro/escuro e telas que só fecham por botão ---- */
.cabecalho-conta { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.btn-tema {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12.5px; color: var(--tinta-2);
  background: var(--card); border: 1px solid var(--linha-forte); border-radius: 999px;
  padding: 6px 12px; min-height: 34px; cursor: pointer;
}
.btn-tema:hover { color: var(--tinta); border-color: var(--dourado); }
.btn-tema svg { width: 16px; height: 16px; flex: none; }
.confirma.chamando, .pdf-visual.chamando { animation: chamar-atencao .26s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .confirma.chamando, .pdf-visual.chamando { animation: none; } }
@media (max-width: 860px) {
  .btn-tema.so-celular { display: inline-flex; margin-top: 0; }
  .cabecalho { align-items: center; }
  .cabecalho-conta { order: -1; width: 100%; justify-content: flex-end; margin: -4px 0 2px; }
}

/* ---- custo da hora aberto ---- */
.formula-hora { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.formula-passo { flex: 1 1 150px; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--card-2); min-width: 0; }
.formula-passo.destaque { border-color: var(--dourado); background: color-mix(in srgb, var(--dourado) 12%, var(--card)); }
.formula-rot { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
.formula-passo strong { font-family: "Marcellus", Georgia, serif; font-weight: 400; font-size: 22px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.formula-nota { font-size: 12px; color: var(--tinta-2); overflow-wrap: anywhere; }
.formula-op { align-self: center; font-size: 22px; color: var(--dourado); padding: 0 2px; }
@media (max-width: 560px) { .formula-op { width: 100%; text-align: center; line-height: 1; } }
.erro-tela { border: 1px solid var(--critico); background: var(--critico-bg); border-radius: var(--raio); padding: 12px 14px; margin: 0 0 14px; font-size: 13px; }
.erro-tela code { font-size: 12px; overflow-wrap: anywhere; }

/* Noivas: atendimento + jornada na mesma célula */
.atend-cel { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }