/* Minha Área · Samantha Dias | Mobiliário Sob Medida
   Mesma linguagem do site: espresso, off-white, bronze, Cormorant Garamond + Jost, cantos retos, fios finos. */
:root {
  --light: #F4F1EC; --paper: #FAF8F4; --placeholder: #E8E3DB; --dark: #2B211B; --dark-2: #352A23;
  --gold: #B89561; --gold-d: #8E6F3F; --beige: #DED1C0; --ink: #2A211D; --ink-inv: #F5F0E8;
  --ink-2: rgba(42,33,29,.72); --ink-3: rgba(42,33,29,.5); --line: rgba(42,33,29,.14); --line-2: rgba(42,33,29,.08);
  --line-inv: rgba(245,240,232,.14); --ink-inv-2: rgba(245,240,232,.7);
  --ok: #4C6B4F; --ok-bg: #E4EBDF; --bad: #94412F; --bad-bg: #F1DED8; --warn: #8A6420; --warn-bg: #F2E8D2;
  --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Jost', system-ui, sans-serif;
  --lado: 252px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--light); color: var(--ink); font: 400 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; }
button { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
[hidden] { display: none !important; }
.esp { flex: 1; }

.eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 500 11px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-2); }
.eyebrow-rule::before { content: ""; width: 30px; height: 1px; background: var(--gold); flex: none; }

/* ---------- estrutura ---------- */
#app { display: grid; grid-template-columns: var(--lado) minmax(0, 1fr); min-height: 100vh; }
.lado { background: var(--dark); color: var(--ink-inv); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; border-right: 1px solid rgba(184,149,97,.2); overflow-y: auto; overflow-x: hidden; }
.marca { display: flex; align-items: center; gap: 14px; padding: 26px 22px 22px; border-bottom: 1px solid var(--line-inv); }
.marca img { height: 46px; width: auto; }
.marca b { display: block; font: 600 18px/1 var(--serif); letter-spacing: .13em; white-space: nowrap; }
.marca small { display: block; margin-top: 5px; font: 500 9px/1.2 var(--sans); letter-spacing: .3em; color: var(--gold); }
.menu { padding: 14px 12px; flex: 1; }
.menu h4 { font: 500 10px/1 var(--sans); letter-spacing: .26em; color: var(--gold); text-transform: uppercase; padding: 18px 12px 8px; opacity: .85; }
.menu a { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; font: 400 15px var(--sans); letter-spacing: .02em; color: rgba(245,240,232,.78); text-decoration: none; cursor: pointer; transition: color .2s, background .2s; }
.menu a:hover { color: var(--ink-inv); background: rgba(245,240,232,.05); }
.menu a.on { color: var(--ink-inv); background: rgba(184,149,97,.12); }
.menu a.on::before { content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; background: var(--gold); transform: translate(-3px, -50%) rotate(45deg); }
.menu a em { font-style: normal; font: 500 11px var(--sans); color: var(--gold); letter-spacing: .04em; }
.lado-pe { padding: 16px 22px 22px; border-top: 1px solid var(--line-inv); font-size: 13px; color: var(--ink-inv-2); }
.lado-pe button { margin-top: 8px; background: none; border: 0; padding: 0; color: var(--gold); cursor: pointer; font-size: 13px; letter-spacing: .04em; border-bottom: 1px solid rgba(184,149,97,.5); }

.conteudo { padding: 40px clamp(20px, 3.4vw, 56px) 80px; max-width: 1360px; width: 100%; }
.topo-mobile { display: none; }

.pag-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.pag-topo h1 { font-size: clamp(34px, 3vw, 44px); line-height: 1.05; margin-top: 10px; letter-spacing: -.005em; }
.pag-acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 500 14px/1.2 var(--sans); letter-spacing: .03em; padding: 11px 20px; border: 1px solid transparent; border-radius: 0; cursor: pointer; white-space: nowrap; transition: background .2s, border-color .2s, color .2s; }
.btn.primary { background: var(--dark); color: var(--ink-inv); } .btn.primary:hover { background: var(--gold); color: var(--ink); }
.btn.gold { background: var(--gold); color: var(--ink); } .btn.gold:hover { background: var(--dark); color: var(--ink-inv); }
.btn.ghost { background: transparent; border-color: rgba(42,33,29,.3); font-weight: 400; } .btn.ghost:hover { border-color: var(--gold); background: rgba(184,149,97,.1); }
.btn.perigo { background: var(--bad); color: #fff; } .btn.perigo:hover { background: #7a3324; }
.btn.perigo-txt { background: none; color: var(--bad); border-color: transparent; padding-left: 0; } .btn.perigo-txt:hover { text-decoration: underline; }
.btn.peq { padding: 7px 13px; font-size: 13px; }
.btn[disabled] { opacity: .5; cursor: default; }
.link { background: none; border: 0; padding: 0; cursor: pointer; border-bottom: 1px solid var(--gold); font-size: 14px; color: var(--ink); }
.link:hover { color: var(--gold-d); }

/* ---------- cartões ---------- */
.card { background: var(--paper); border: 1px solid var(--line); padding: 24px 26px; margin-bottom: 22px; position: relative; }
.card.fio::before { content: ""; position: absolute; left: -1px; top: 24px; width: 3px; height: 34px; background: var(--gold); }
.card-topo { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.card-topo h3 { font-size: 26px; line-height: 1.1; }
.grade2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .grade2 > .card { margin-bottom: 0; }
.grade3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .grade3 > .card { margin-bottom: 0; }
.grade-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 22px; }
.kpi { background: var(--paper); border: 1px solid var(--line); border-top: 2px solid var(--gold); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.kpi-r { font: 500 11px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.kpi strong { font: 500 30px/1.1 var(--serif); }
.kpi small { color: var(--ink-3); font-size: 13px; }
.kpi.bad strong { color: var(--bad); } .kpi.ok strong { color: var(--ok); }
.vazio { color: var(--ink-3); font-size: 14px; padding: 14px 0; }
.nota { font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.aviso { background: var(--warn-bg); border-left: 3px solid var(--gold); padding: 12px 16px; font-size: 14px; margin-bottom: 16px; }

/* ---------- tabelas ---------- */
.tab-rolagem { overflow-x: auto; }
.tab { width: 100%; border-collapse: collapse; font-size: 14px; }
.tab th { text-align: left; font: 500 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); padding: 0 12px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tab td { padding: 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.tab tr.clic { cursor: pointer; } .tab tr.clic:hover td { background: rgba(184,149,97,.08); }
.tab .d { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .tab th.d { text-align: right; }
.tab .c { text-align: center; }
.tab td b { font-weight: 500; }
.tab td small { display: block; color: var(--ink-3); font-size: 12.5px; }
.tab tfoot td { font-weight: 500; border-top: 1px solid var(--line); border-bottom: 0; background: rgba(184,149,97,.06); }
.tag { display: inline-block; font: 500 11.5px/1 var(--sans); letter-spacing: .06em; padding: 5px 9px; background: var(--placeholder); color: var(--ink-2); white-space: nowrap; }
.tag.ok { background: var(--ok-bg); color: var(--ok); } .tag.bad { background: var(--bad-bg); color: var(--bad); } .tag.warn { background: var(--warn-bg); color: var(--warn); } .tag.gold { background: rgba(184,149,97,.2); color: var(--gold-d); } .tag.dark { background: var(--dark); color: var(--ink-inv); }
.pos { color: var(--ok); } .neg { color: var(--bad); }

/* ---------- barra de ferramentas ---------- */
.barra { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.busca, .filtro { font: 400 14px var(--sans); padding: 10px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 0; color: var(--ink); min-width: 0; }
.busca { flex: 1; min-width: 200px; max-width: 360px; }
.busca:focus, .filtro:focus { outline: none; border-color: var(--gold); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.chip { background: transparent; border: 1px solid var(--line); padding: 7px 14px; font-size: 13.5px; cursor: pointer; }
.chip:hover { border-color: var(--gold); } .chip.on { background: var(--dark); color: var(--ink-inv); border-color: var(--dark); }
.chip em { font-style: normal; opacity: .6; margin-left: 6px; font-size: 12px; }

.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 22px; overflow-x: auto; }
.aba { background: none; border: 0; padding: 12px 18px; font: 500 14.5px var(--sans); color: var(--ink-2); cursor: pointer; position: relative; white-space: nowrap; }
.aba:hover { color: var(--ink); }
.aba.on { color: var(--ink); } .aba.on::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--gold); }
.aba em { font-style: normal; font-size: 12px; margin-left: 7px; color: var(--gold-d); }

/* ---------- formulários ---------- */
.grade-form { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 16px; }
.campo { grid-column: span 3; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo.w2 { grid-column: span 2; } .campo.w4 { grid-column: span 4; } .campo.w6 { grid-column: span 6; } .campo.w1 { grid-column: span 1; }
.campo > span { font: 500 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.campo.req > span::after { content: " *"; color: var(--gold-d); }
.campo input, .campo select, .campo textarea { font: 400 15px var(--sans); padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 0; color: var(--ink); width: 100%; min-width: 0; }
.campo textarea { resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184,149,97,.15); }
.campo input:disabled, .campo select:disabled { background: transparent; border-color: transparent; padding-left: 0; }
.campo small { color: var(--ink-3); font-size: 12px; }
.chk { grid-column: span 3; display: flex; align-items: center; gap: 10px; font-size: 14.5px; cursor: pointer; padding: 6px 0; }
.chk input { width: 18px; height: 18px; accent-color: var(--gold-d); }
.sec-form { grid-column: 1 / -1; font: 500 11px var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-d); padding-top: 10px; border-top: 1px solid var(--line); margin-top: 4px; }
.sec-form:first-child { border-top: 0; margin-top: 0; padding-top: 0; }

/* ---------- modal ---------- */
.modal-fundo { position: fixed; inset: 0; background: rgba(30,22,17,.55); z-index: 80; display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px; overflow-y: auto; }
.modal { background: var(--paper); border: 1px solid var(--line); width: 100%; max-width: 760px; box-shadow: 0 30px 80px rgba(20,15,12,.35); }
.modal.largo { max-width: 1040px; }
.modal-topo { display: flex; justify-content: space-between; gap: 16px; padding: 24px 28px 18px; border-bottom: 1px solid var(--line); }
.modal-topo h2 { font-size: 30px; line-height: 1.1; margin-top: 8px; }
.modal-topo .x { background: none; border: 0; font-size: 30px; line-height: 1; cursor: pointer; color: var(--ink-2); align-self: flex-start; padding: 0 4px; }
.modal-corpo { padding: 24px 28px; }
.modal-pe { display: flex; gap: 10px; align-items: center; padding: 16px 28px 22px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.texto-modal { font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* ---------- login ---------- */
.login { min-height: 100vh; display: grid; place-items: center; background: var(--dark); color: var(--ink-inv); padding: 24px; position: relative; overflow: hidden; isolation: isolate; }
.login::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse 50% 60% at 50% 40%, rgba(184,149,97,.1), transparent 70%); }
.login .marca-fundo { position: absolute; z-index: -1; width: min(560px, 90vw); opacity: .06; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.login-caixa { width: 100%; max-width: 400px; text-align: center; }
.login-caixa img.logo { height: 76px; margin: 0 auto 18px; }
.login-caixa h1 { font: 600 28px/1 var(--serif); letter-spacing: .16em; }
.login-caixa .sub { font: 500 10px var(--sans); letter-spacing: .3em; color: var(--gold); margin: 8px 0 34px; }
.login-caixa form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.login-caixa label span { display: block; font: 500 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-inv-2); margin-bottom: 6px; }
.login-caixa input { width: 100%; padding: 13px 14px; font: 400 16px var(--sans); background: rgba(245,240,232,.06); border: 1px solid var(--line-inv); color: var(--ink-inv); border-radius: 0; }
.login-caixa input:focus { outline: none; border-color: var(--gold); }
.login-caixa .btn { margin-top: 8px; padding: 15px; background: var(--gold); color: var(--ink); } .login-caixa .btn:hover { background: var(--ink-inv); }
.login-erro { color: #E8A596; font-size: 14px; min-height: 20px; text-align: center; }
.login-nota { margin-top: 26px; font-size: 12.5px; color: var(--ink-inv-2); }

/* ---------- toasts ---------- */
#toasts { position: fixed; right: 20px; bottom: 20px; z-index: 120; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.toast { background: var(--dark); color: var(--ink-inv); padding: 12px 18px; border-left: 3px solid var(--gold); font-size: 14px; max-width: 420px; box-shadow: 0 10px 30px rgba(20,15,12,.3); transition: opacity .4s, transform .4s; }
.toast.erro { border-left-color: #D2745F; } .toast.sai { opacity: 0; transform: translateY(6px); }

/* ---------- específicos ---------- */
.lista-simples { display: flex; flex-direction: column; }
.item { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.item:last-child { border-bottom: 0; }
.item .t { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .item .t b { font-weight: 500; } .item .t small { color: var(--ink-3); font-size: 13px; }
.item.clic { cursor: pointer; } .item.clic:hover { background: rgba(184,149,97,.07); }
.funil { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: start; }
.col-funil { background: rgba(222,209,192,.28); border: 1px solid var(--line); min-height: 140px; }
.col-funil header { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 14px 10px; border-bottom: 1px solid var(--line); }
.col-funil h4 { font: 500 11px var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.col-funil header small { color: var(--ink-3); font-size: 12.5px; }
.cartao-cli { background: var(--paper); border: 1px solid var(--line); margin: 10px; padding: 12px 14px; cursor: pointer; }
.cartao-cli:hover { border-color: var(--gold); }
.cartao-cli b { font-weight: 500; display: block; } .cartao-cli small { color: var(--ink-3); display: block; font-size: 12.5px; }
.cartao-cli select { margin-top: 8px; width: 100%; font-size: 12.5px; padding: 5px; background: transparent; border: 1px solid var(--line-2); }
.barra-prog { height: 8px; background: var(--placeholder); position: relative; margin: 10px 0 6px; } .barra-prog i { position: absolute; inset: 0 auto 0 0; background: var(--gold); }
.ficha-topo { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 26px; }
.ficha-topo h1 { font-size: clamp(36px, 3.4vw, 50px); line-height: 1.04; margin-top: 10px; }
.ficha-meta { display: flex; gap: 8px 22px; flex-wrap: wrap; margin-top: 12px; color: var(--ink-2); font-size: 14.5px; }
.ficha-meta a { border-bottom: 1px solid var(--gold); text-decoration: none; }
.voltar { background: none; border: 0; padding: 0; cursor: pointer; font-size: 13.5px; color: var(--ink-2); margin-bottom: 18px; letter-spacing: .04em; } .voltar:hover { color: var(--gold-d); }
.par { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 6px 16px; font-size: 14.5px; } .par dt { color: var(--ink-3); } .par dd { margin: 0; }
.linhas-edit { display: flex; flex-direction: column; gap: 10px; }
.linha-edit { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; align-items: end; padding: 12px; border: 1px solid var(--line-2); background: #fff; }
.linha-edit .campo { grid-column: span 3; }
.linha-edit .campo.w2 { grid-column: span 2; } .linha-edit .campo.w4 { grid-column: span 4; } .linha-edit .campo.w6 { grid-column: span 6; } .linha-edit .campo.w1 { grid-column: span 1; }
.linha-edit .rm { background: none; border: 0; color: var(--bad); cursor: pointer; font-size: 22px; line-height: 1; padding: 6px; }
.tl { position: relative; padding-left: 24px; } .tl::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.tl .ev { position: relative; padding: 0 0 16px; } .tl .ev::before { content: ""; position: absolute; left: -23px; top: 7px; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }
.tl .ev small { color: var(--ink-3); display: block; font-size: 12.5px; } .tl .ev p { white-space: pre-wrap; }
.etapa-sel { font: 500 13px var(--sans); letter-spacing: .04em; padding: 7px 10px; background: var(--dark); color: var(--ink-inv); border: 0; border-radius: 0; cursor: pointer; }
.alerta-linha { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.dot { width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); flex: none; } .dot.bad { background: var(--bad); } .dot.ok { background: var(--ok); }
.carregando { padding: 80px 0; text-align: center; color: var(--ink-3); font: italic 22px var(--serif); }

@media (max-width: 1100px) { .grade3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  #app { grid-template-columns: 1fr; }
  .lado { position: fixed; z-index: 60; inset: 0 auto 0 0; width: min(300px, 86vw); transform: translateX(-100%); transition: transform .28s; }
  .lado.aberto { transform: none; box-shadow: 0 0 0 100vmax rgba(20,15,12,.5); }
  .topo-mobile { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 40; background: rgba(43,33,27,.97); color: var(--ink-inv); padding: 10px 18px; border-bottom: 1px solid rgba(184,149,97,.2); }
  .topo-mobile b { font: 600 17px var(--serif); letter-spacing: .16em; }
  .topo-mobile button { background: none; border: 0; color: var(--ink-inv); font-size: 26px; padding: 4px 8px; cursor: pointer; }
  .conteudo { padding: 26px 16px 70px; }
  .grade2, .grade3 { grid-template-columns: 1fr; }
  .grade-form { grid-template-columns: 1fr 1fr; }
  .campo, .campo.w2, .campo.w4, .campo.w6, .chk { grid-column: span 2; } .campo.w1 { grid-column: span 1; }
  .linha-edit { grid-template-columns: 1fr 1fr; } .linha-edit .campo, .linha-edit .campo.w1, .linha-edit .campo.w2, .linha-edit .campo.w4, .linha-edit .campo.w6 { grid-column: span 2; }
  .modal-fundo { padding: 0; } .modal { max-width: none; min-height: 100vh; border: 0; }
  .modal-topo, .modal-corpo, .modal-pe { padding-left: 18px; padding-right: 18px; }
  .card { padding: 20px 18px; }
  .par { grid-template-columns: 1fr; }
  .tab.cartoes thead { display: none; }
  .tab.cartoes, .tab.cartoes tbody, .tab.cartoes tr, .tab.cartoes td { display: block; width: 100%; }
  .tab.cartoes tr { padding: 12px 0; border-bottom: 1px solid var(--line); } .tab.cartoes td { border: 0; padding: 3px 0; text-align: left; }
  .tab.cartoes td::before { content: attr(data-l) ": "; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
}
@media print { .lado, .topo-mobile, .pag-acoes, .barra, .abas { display: none !important; } #app { display: block; } }

/* contrato: resumo da forma de pagamento */
.aviso-suave { border: 1px solid var(--line, #e2ddd5); padding: 12px 16px; margin-bottom: 16px; font-size: 14px; }
.aviso-suave small { display: block; margin-top: 6px; opacity: .75; }
.pre-pag { white-space: pre-wrap; font: inherit; margin: 8px 0 0; }