/* ===== Login ===== */
.auth-body {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(900px 500px at 50% -10%, #fdecec 0%, #f7f8fa 60%); padding: 22px;
}
.auth-card {
  width: 100%; max-width: 410px; background: #fff; border-radius: 16px;
  box-shadow: var(--shadow-lg); padding: 2.2rem; text-align: center;
}
.auth-brand { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.4rem; }
.auth-brand img { width: 40px; height: 40px; border-radius: 8px; }
.auth-card h1 { font-size: 1.5rem; }
.auth-sub { color: var(--muted); margin: .3rem 0 1.6rem; font-size: .95rem; }
.auth-card .field { text-align: left; }
.auth-row { display: flex; align-items: center; justify-content: space-between; font-size: .88rem; color: var(--ink-soft); margin: .2rem 0 1.2rem; }
.auth-row .link { color: var(--red); font-weight: 600; }
.auth-demo { background: #f7f8fa; border: 1px dashed var(--line); border-radius: 10px; padding: .7rem .8rem; font-size: .82rem; color: var(--ink-soft); margin-top: 1.2rem; }
.auth-demo code { background: #fff; padding: 0 4px; border-radius: 4px; color: var(--red-dark); }
.auth-back { display: inline-block; margin-top: 1rem; color: var(--muted); font-size: .9rem; }
.auth-back:hover { color: var(--red); }
.auth-by { margin-top: .75rem; font-size: .8rem; color: var(--muted); }
.auth-by a { color: var(--red); text-decoration: none; }
.auth-by a:hover { text-decoration: underline; }

/* ===== App shell ===== */
.app-body { background: var(--bg-alt); }
.app-topbar {
  position: sticky; top: 0; z-index: 40; height: 62px; background: #fff;
  border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 1rem; padding: 0 18px;
}
.app-burger { display: none; background: none; border: 0; font-size: 1.4rem; cursor: pointer; }
.app-brand { display: flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.15rem; }
.app-brand img { width: 34px; height: 34px; border-radius: 7px; }
.app-user { margin-left: auto; display: flex; align-items: center; gap: .8rem; }
.app-user-name { font-weight: 600; color: var(--ink-soft); font-size: .92rem; }

.app-layout { display: grid; grid-template-columns: 230px 1fr; min-height: calc(100vh - 62px); }
.app-side { background: #fff; border-right: 1px solid var(--line); padding: 1.1rem .8rem; display: flex; flex-direction: column; }
.side-link { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border-radius: 10px; color: var(--ink-soft); font-weight: 600; font-size: .95rem; margin-bottom: .2rem; }
.side-link:hover { background: var(--bg-alt); }
.side-link.active { background: #fdecec; color: var(--red-dark); }
.side-foot { margin-top: auto; font-size: .76rem; color: var(--muted); padding: .8rem; }

.app-main { padding: 1.8rem clamp(1rem, 3vw, 2.4rem); max-width: 1000px; }
.view { display: none; animation: fade .25s ease; }
.view.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.view h1 { font-size: 1.7rem; }
.view-sub { color: var(--muted); margin: .4rem 0 1.6rem; }

/* Cartões */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; margin-bottom: 1.4rem; }
.card h2 { font-size: 1.15rem; margin-bottom: 1rem; }
.field-row.four { grid-template-columns: repeat(4, 1fr); }
.field.flex-end { display: flex; align-items: flex-end; gap: .6rem; }

/* Painel */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-bottom: 1.6rem; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem; }
.stat-num { display: block; font-size: 1.9rem; font-weight: 800; color: var(--red); }
.stat-label { color: var(--muted); font-size: .9rem; }
.quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.quick-card { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem; cursor: pointer; transition: .2s; display: flex; flex-direction: column; gap: .25rem; }
.quick-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #f0d4d5; }
.quick-card span { font-size: 1.6rem; }
.quick-card small { color: var(--muted); }

/* Áudio / análise */
.audio-row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.audio-note { color: var(--muted); font-size: .88rem; }

/* Tabelas */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.data-table th { text-align: left; background: var(--bg-alt); color: var(--ink-soft); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; padding: .6rem .7rem; border-bottom: 1px solid var(--line); }
.data-table td { padding: .55rem .7rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.data-table .num { text-align: right; }
.data-table input { width: 78px; border: 1px solid var(--line); border-radius: 7px; padding: .35rem .4rem; text-align: right; font-family: inherit; }
.data-table .desc-in { width: 100%; min-width: 160px; text-align: left; }
.tag-origem { font-size: .72rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px; }
.tag-cat { background: #e7f0e9; color: #1a7a3a; }
.tag-mer { background: #e8effb; color: #2347a8; }
.tag-man { background: #f1efef; color: #5a5252; }
.btn-x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1.1rem; }
.btn-x:hover { color: var(--red); }
.btn-mini { background: var(--bg-alt); border: 1px solid var(--line); border-radius: 7px; padding: .25rem .5rem; cursor: pointer; font-size: .82rem; margin-right: .3rem; }
.btn-mini:hover { border-color: var(--red); color: var(--red); }

/* Orçamento */
.orc-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.orc-add { display: flex; gap: .5rem; }
.orc-add select { border: 1px solid var(--line); border-radius: 8px; padding: .45rem .6rem; font-family: inherit; max-width: 260px; }
.orc-totais { margin-top: 1.1rem; margin-left: auto; max-width: 300px; }
.orc-totais div { display: flex; justify-content: space-between; padding: .35rem 0; color: var(--ink-soft); }
.orc-totais .total { border-top: 2px solid var(--ink); margin-top: .3rem; padding-top: .6rem; font-size: 1.15rem; color: var(--ink); }
.orc-totais .total strong { color: var(--red); }
.orc-actions { display: flex; gap: .7rem; justify-content: flex-end; margin-top: 1.2rem; }
.hint { color: var(--muted); font-size: .82rem; margin-top: .8rem; }

/* Fotos */
.depois-note { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(193,39,45,.92); color: #fff; font-size: .8rem; font-weight: 600; padding: .4rem .7rem; text-align: center; }
#view-fotos .ba-item img { aspect-ratio: 4/3; object-fit: cover; background: var(--bg-alt); }

/* Responsivo app */
@media (max-width: 820px) {
  .app-layout { grid-template-columns: 1fr; }
  .app-side {
    position: fixed; top: 62px; left: 0; bottom: 0; width: 230px; z-index: 45;
    transform: translateX(-110%); transition: transform .25s ease;
  }
  .app-side.open { transform: translateX(0); }
  .app-burger { display: block; }
  .stats, .quick, .field-row, .field-row.four { grid-template-columns: 1fr; }
  .app-user-name { display: none; }
}
@media (max-width: 560px) { .field-row.four { grid-template-columns: 1fr 1fr; } }

/* Miniaturas das fotos dos leads */
.lead-fotos { white-space: nowrap; }
.lead-foto { height: 44px; width: 44px; object-fit: cover; border-radius: 4px; margin: 2px; border: 1px solid #ddd; cursor: zoom-in; vertical-align: middle; }

/* Obras — lucro */
.lucro-pos { color: #1a8a3a; }
.lucro-neg { color: #c0282d; }

/* Estado do orçamento */
.estado-sel { font-size: 12px; padding: 3px 6px; border-radius: 5px; border: 1px solid #ccc; font-weight: 600; }
.estado-rascunho { color: #777; }
.estado-enviado { color: #1d6fb8; border-color: #9cc4e6; }
.estado-aceite { color: #1a8a3a; border-color: #9ed8af; }
.estado-recusado { color: #c0282d; border-color: #e6a3a3; }

/* Prévia do resultado no orçamento */
.prev-leadfotos { margin-bottom: 10px; }
.prev-lbl { display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
#previaLeadThumbs .lead-foto { cursor: pointer; height: 56px; width: 56px; }

/* Impressão do orçamento */
/* Definições (SaaS) */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.table-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.card h3 { margin: 0 0 4px; font-size: 16px; }
.meter { height: 10px; background: #eee; border-radius: 6px; overflow: hidden; margin: 8px 0; }
.meter-bar { height: 100%; background: linear-gradient(90deg, #1a8a3a, #c0282d); transition: width .3s; }

/* Drill-down de organização */
.od-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0 4px; }
@media (max-width: 640px) { .od-grid { grid-template-columns: 1fr 1fr; } }
.od-cell { display: flex; flex-direction: column; padding: 8px 10px; background: #faf9f9; border: 1px solid var(--line); border-radius: 8px; }
.od-k { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.od-v { font-weight: 600; word-break: break-word; }
.od-h { margin: 18px 0 4px; font-size: .95rem; }
.od-features { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.od-feat { font-size: .82rem; background: #f1efef; border-radius: 6px; padding: 3px 9px; }
#offlineBar { background: #1a1a1a; color: #fff; text-align: center; padding: 8px 12px; font-size: .85rem; position: sticky; top: 0; z-index: 200; }
.btn-wa { background: #25d366; color: #fff; border-color: #25d366; }
.btn-wa:hover { background: #1ebe5b; border-color: #1ebe5b; }
.plano-edit { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 6px 0 16px; background: #faf9f9; }
.hist-chart { margin: 6px 0 10px; }
.hist-chart rect { transition: opacity .15s; }
.hist-chart rect:hover { opacity: .75; }
.btn.hist-on { background: var(--red); color: #fff; border-color: var(--red); }

@media print {
  .app-topbar, .app-side, .side-foot, .audio-row, .orc-add, .orc-actions, .quick, .stats { display: none !important; }
  .app-main { max-width: 100%; padding: 0; }
  .card { border: none; box-shadow: none; }
}

/* Filtro compacto (ex.: origem dos leads) */
.input-mini {
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: .85rem;
  background: #fff;
}