/* OS JSA Imobiliária - Rocha Intelligence */
:root {
  --primary: #4f46e5; --primary-dark: #4338ca; --primary-light: #eef2ff;
  --gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0; --gray-300: #cbd5e1;
  --gray-400: #94a3b8; --gray-500: #64748b; --gray-600: #475569; --gray-700: #334155;
  --gray-800: #1e293b; --gray-900: #0f172a;
  --green: #059669; --red: #dc2626; --orange: #d97706; --blue: #2563eb; --purple: #7c3aed;
  --radius: 12px; --shadow: 0 4px 24px rgba(0,0,0,.06);
  --sidebar-w: 260px;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,system-ui,'Segoe UI',Roboto,sans-serif; background:var(--gray-50); color:var(--gray-800); line-height:1.5; }
a { color:var(--primary); text-decoration:none; }

/* BUTTONS */
.btn { display:inline-flex; align-items:center; gap:.4rem; padding:.55rem 1.1rem; border:none; border-radius:8px; font-size:.82rem; font-weight:600; cursor:pointer; transition:all .15s; }
.btn:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.1); }
.btn-primary { background:var(--primary); color:#fff; }
.btn-gradient { background:linear-gradient(135deg,var(--primary),var(--purple)); color:#fff; }
.btn-ghost { background:transparent; color:var(--gray-600); border:1px solid var(--gray-200); }
.btn-dark { background:var(--gray-800); color:#fff; }
.btn-green { background:var(--green); color:#fff; }
.btn-red { background:var(--red); color:#fff; }
.btn-sm { padding:.4rem .7rem; font-size:.75rem; }
.btn-lg { padding:.75rem 1.5rem; font-size:.9rem; }
.btn-full { width:100%; justify-content:center; }
.btn-icon { background:none; border:none; cursor:pointer; padding:.4rem; color:var(--gray-500); font-size:1rem; }

/* LOGIN */
.login-wrapper { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 50%,#312e81 100%); position:relative; overflow:hidden; }
.login-bg-effect { position:absolute; inset:0; background:radial-gradient(circle at 30% 50%,rgba(79,70,229,.15),transparent 50%),radial-gradient(circle at 70% 80%,rgba(124,58,237,.1),transparent 40%); }
.login-card { background:rgba(255,255,255,.97); border-radius:20px; padding:2.5rem; width:100%; max-width:400px; box-shadow:0 20px 60px rgba(0,0,0,.3); position:relative; z-index:1; }
.login-brand { text-align:center; margin-bottom:2rem; }
.brand-icon { width:56px; height:56px; border-radius:14px; color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin:0 auto .75rem; overflow:hidden; box-shadow:0 4px 14px rgba(13,31,54,.25); }
.brand-icon img, .brand-mark img { width:100%; height:100%; object-fit:cover; display:block; }
.login-brand h1 { font-size:1.5rem; color:var(--gray-900); }
.brand-sub { font-size:.85rem; color:var(--gray-500); margin-top:.2rem; }
.input-group { position:relative; margin-bottom:1rem; }
.input-group i { position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:var(--gray-400); font-size:.85rem; }
.input-group input { width:100%; padding:.8rem 1rem .8rem 2.5rem; border:1.5px solid var(--gray-200); border-radius:10px; font-size:.9rem; transition:border .2s; }
.input-group input:focus { outline:none; border-color:var(--primary); }
.msg-erro { color:var(--red); font-size:.8rem; text-align:center; margin-top:.75rem; min-height:1.2rem; }
.login-footer { text-align:center; margin-top:1.5rem; font-size:.75rem; color:var(--gray-400); }
.login-footer-logo { display:block; height:28px; margin:.5rem auto 0; }
.powered { display:block; margin-top:.5rem; }

/* APP LAYOUT */
.app-layout { display:flex; min-height:100vh; }

/* SIDEBAR */
.sidebar { width:var(--sidebar-w); background:var(--gray-900); color:#fff; display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; z-index:100; transition:transform .3s; }
.sidebar-brand { padding:1.25rem 1.5rem; display:flex; align-items:center; gap:.75rem; border-bottom:1px solid rgba(255,255,255,.08); }
.brand-mark { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1rem; overflow:hidden; }
.brand-name { font-weight:700; font-size:1.05rem; }
.sidebar-nav { flex:1; padding:1rem 0; overflow-y:auto; }
.nav-link { display:flex; align-items:center; gap:.75rem; padding:.7rem 1.5rem; color:var(--gray-400); font-size:.85rem; transition:all .15s; }
.nav-link:hover { color:#fff; background:rgba(255,255,255,.05); }
.nav-link.active { color:#fff; background:rgba(79,70,229,.3); border-right:3px solid var(--primary); }
.nav-link i { width:20px; text-align:center; }
.nav-divider { height:1px; background:rgba(255,255,255,.06); margin:.75rem 1.5rem; }
.sidebar-user { padding:1rem 1.5rem; border-top:1px solid rgba(255,255,255,.08); display:flex; align-items:center; gap:.75rem; }
.user-avatar { width:34px; height:34px; border-radius:50%; background:var(--primary); display:flex; align-items:center; justify-content:center; color:#fff; font-size:.75rem; }
.user-details { flex:1; }
.user-name { display:block; font-size:.8rem; font-weight:600; color:#fff; }
.user-role { display:block; font-size:.7rem; color:var(--gray-400); text-transform:uppercase; }
.sidebar-overlay { display:none; }

/* MAIN */
/* min-width:0 é essencial aqui: sem ele, um item flex (.main é item de .app-layout, que é
   flex) nunca encolhe abaixo da largura mínima do conteúdo mais largo lá dentro (regra
   padrão min-width:auto do flexbox) — o Kanban (várias colunas lado a lado) "vazava" e
   empurrava a PÁGINA INTEIRA pro lado no mobile, em vez de só ele mesmo rolar
   horizontalmente com seu próprio overflow-x:auto. */
.main { flex:1; min-width:0; margin-left:var(--sidebar-w); display:flex; flex-direction:column; }
.topbar { display:flex; align-items:center; gap:1rem; padding:.75rem 1.5rem; background:#fff; border-bottom:1px solid var(--gray-200); position:sticky; top:0; z-index:50; }
.topbar-logo { height:32px; border-radius:6px; }
.topbar h2 { font-size:1.1rem; white-space:nowrap; }
.search-wrapper { position:relative; flex:1; max-width:400px; margin-left:auto; }
.search-wrapper i { position:absolute; left:.8rem; top:50%; transform:translateY(-50%); color:var(--gray-400); font-size:.8rem; }
.search-wrapper input { width:100%; padding:.5rem .8rem .5rem 2.2rem; border:1.5px solid var(--gray-200); border-radius:8px; font-size:.8rem; }
.search-wrapper input:focus { outline:none; border-color:var(--primary); }
.search-results { position:absolute; top:100%; left:0; right:0; background:#fff; border:1px solid var(--gray-200); border-radius:8px; box-shadow:var(--shadow); display:none; max-height:300px; overflow-y:auto; z-index:999; }
.search-results.active { display:block; }
.empresa-badge { font-size:.75rem; background:var(--primary-light); color:var(--primary); padding:.3rem .8rem; border-radius:20px; font-weight:600; white-space:nowrap; }

/* Central de notificações (sino na topbar) — persiste no banco, então continua ali mesmo
   depois de reconectar/reabrir o navegador, diferente do push (que exige opt-in e não
   funciona se o corretor estava offline). */
.notif-sino-wrap { position:relative; }
.notif-sino-btn { position:relative; width:38px; height:38px; border-radius:50%; border:none; background:var(--gray-100); color:var(--gray-600); font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.notif-sino-btn:hover { background:var(--gray-200); }
.notif-sino-badge { position:absolute; top:-2px; right:-2px; background:#dc2626; color:#fff; font-size:.62rem; font-weight:700; min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0 3px; }
.notif-dropdown { position:absolute; top:calc(100% + .5rem); right:0; width:340px; max-width:92vw; background:#fff; border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.15); border:1px solid var(--gray-200); z-index:400; overflow:hidden; }
.notif-dropdown-header { display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem; border-bottom:1px solid var(--gray-200); background:var(--gray-50); }
.notif-dropdown-header strong { font-size:.85rem; color:var(--gray-800); }
.notif-dropdown-header .btn { font-size:.68rem; padding:.25rem .5rem; }
.notif-dropdown-lista { max-height:380px; overflow-y:auto; }
.notif-item { display:flex; gap:.6rem; padding:.7rem 1rem; border-bottom:1px solid var(--gray-100); cursor:pointer; transition:background .12s; }
.notif-item:last-child { border-bottom:none; }
.notif-item:hover { background:var(--gray-50); }
.notif-item.nao-lida { background:#f5f3ff; }
.notif-item-icone { width:32px; height:32px; min-width:32px; border-radius:50%; background:#ede9fe; color:#7c3aed; display:flex; align-items:center; justify-content:center; font-size:.8rem; }
.notif-item-corpo { min-width:0; flex:1; }
.notif-item-titulo { font-size:.8rem; font-weight:700; color:var(--gray-800); }
.notif-item-texto { font-size:.76rem; color:var(--gray-600); margin-top:.1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.notif-item-hora { font-size:.66rem; color:var(--gray-400); margin-top:.25rem; }
.notif-vazio { padding:2rem 1rem; text-align:center; color:var(--gray-400); font-size:.82rem; }
@media(max-width:768px) {
  .notif-dropdown { position:fixed; top:60px; right:.5rem; left:.5rem; width:auto; max-width:none; }
}
.content { flex:1; min-width:0; padding:1.5rem; position:relative; overflow-x:hidden; }
.content::before {
  content:""; position:absolute; top:0; right:0; bottom:0; left:0;
  background:url(/img/logo-jsa.png) center/min(28vw,320px) no-repeat;
  opacity:.05; filter:grayscale(1); pointer-events:none; z-index:0;
}
.page { display:none; position:relative; z-index:1; }
.page.active { display:block; }
.app-footer { text-align:center; padding:1rem; border-top:1px solid var(--gray-200); font-size:.75rem; color:var(--gray-400); }
.footer-logo { height:30px; width:auto; object-fit:contain; border-radius:4px; vertical-align:middle; margin-right:.5rem; }

/* CARDS & STATS */
.card { background:#fff; border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow); }
.form-card { padding:1.5rem; }
.form-panel-top { margin-bottom:1rem; scroll-margin-top:1rem; }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; }
.stat-card { background:#fff; border-radius:var(--radius); padding:1.25rem; display:flex; align-items:center; gap:1rem; box-shadow:var(--shadow); }
.stat-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.stat-icon.blue { background:#dbeafe; color:#2563eb; }
.stat-icon.green { background:#dcfce7; color:#16a34a; }
.stat-icon.purple { background:#ede9fe; color:#7c3aed; }
.stat-icon.orange { background:#fef3c7; color:#d97706; }
.stat-num { display:block; font-size:1.5rem; font-weight:700; color:var(--gray-800); }
.stat-label { font-size:.75rem; color:var(--gray-500); }

/* MÉTRICAS DE NEGÓCIO */
.metricas-funil-total { font-size:.85rem; color:var(--gray-500); margin-bottom:1rem; }
.metricas-funil-barras { display:flex; gap:1.5rem; align-items:flex-end; height:160px; margin-bottom:1rem; }
.metricas-funil-col { flex:1; display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-end; gap:.35rem; }
.metricas-funil-barra-wrap { flex:1; width:100%; max-width:64px; display:flex; align-items:flex-end; }
.metricas-funil-barra { width:100%; border-radius:8px 8px 0 0; min-height:4px; transition:height .3s; }
.metricas-funil-col strong { font-size:1.1rem; color:var(--gray-800); }
.metricas-funil-col span { font-size:.72rem; color:var(--gray-500); text-align:center; }
.metricas-funil-taxas { display:flex; gap:1.5rem; flex-wrap:wrap; padding-top:1rem; border-top:1px solid var(--gray-200); font-size:.82rem; color:var(--gray-600); }
.metricas-funil-taxas strong { color:var(--gray-800); }
.metricas-tempo-resumo { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1rem; margin-bottom:1.25rem; }
.metricas-tempo-faixas { display:flex; flex-direction:column; gap:.5rem; }
.metricas-tempo-faixa-row { display:flex; align-items:center; gap:.75rem; font-size:.8rem; }
.metricas-tempo-faixa-label { width:90px; flex-shrink:0; color:var(--gray-600); }
.metricas-tempo-faixa-barra-wrap { flex:1; background:var(--gray-100); border-radius:6px; height:14px; overflow:hidden; }
.metricas-tempo-faixa-barra { height:100%; border-radius:6px; transition:width .3s; }
.metricas-tempo-faixa-n { width:24px; text-align:right; flex-shrink:0; font-weight:600; color:var(--gray-700); }
@media (max-width:600px) {
  .metricas-funil-barras { height:120px; gap:.5rem; }
  .metricas-funil-col span { font-size:.65rem; }
}

/* Atendimento em tempo real (visão operacional ao vivo, dentro de Métricas) */
.metricas-tr-status { display:flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:600; color:#16a34a; }
.metricas-tr-status .dot { width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.18); animation:metricasTrPulse 2s infinite; }
@keyframes metricasTrPulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }
.metricas-tr-colunas { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.metricas-tr-lista { display:flex; flex-direction:column; gap:.5rem; max-height:320px; overflow-y:auto; }
.metricas-tr-item { display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.5rem .65rem; background:var(--gray-50); border-radius:8px; font-size:.8rem; }
.metricas-tr-item-info { min-width:0; }
.metricas-tr-item-nome { font-weight:600; color:var(--gray-800); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.metricas-tr-item-sub { font-size:.7rem; color:var(--gray-500); }
.metricas-tr-tempo { font-size:.7rem; font-weight:700; padding:.15rem .5rem; border-radius:12px; white-space:nowrap; flex-shrink:0; }
.metricas-tr-tempo.ok { background:#dcfce7; color:#16a34a; }
.metricas-tr-tempo.atencao { background:#fef3c7; color:#b45309; }
.metricas-tr-tempo.critico { background:#fee2e2; color:#dc2626; }
.metricas-tr-vazio { color:var(--gray-400); font-size:.8rem; padding:.75rem; text-align:center; }
@media (max-width:768px) {
  .metricas-tr-colunas { grid-template-columns:1fr; }
}

/* AUTOMAÇÕES */
.switch { position:relative; display:inline-block; width:38px; height:22px; }
.switch input { opacity:0; width:0; height:0; }
.switch-slider { position:absolute; cursor:pointer; inset:0; background:var(--gray-300); border-radius:22px; transition:.2s; }
.switch-slider::before { content:""; position:absolute; height:16px; width:16px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.2s; }
.switch input:checked + .switch-slider { background:var(--primary,#4f46e5); }
.switch input:checked + .switch-slider::before { transform:translateX(16px); }
.automacao-linha { display:flex; gap:.5rem; align-items:center; margin-bottom:.5rem; flex-wrap:wrap; }
.automacao-linha select, .automacao-linha input[type="text"] { padding:.45rem .6rem; border:1.5px solid var(--gray-200); border-radius:8px; font-size:.82rem; }
.automacao-linha input[type="text"] { flex:1; min-width:120px; }
.grid-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1rem; }

/* FORMS */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; }
.grid-4 { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.75rem; }
.field { display:flex; flex-direction:column; }
.field label { font-size:.72rem; font-weight:600; color:var(--gray-600); margin-bottom:.25rem; text-transform:uppercase; letter-spacing:.02em; }
.field input, .field select, .field textarea { padding:.55rem .75rem; border:1.5px solid var(--gray-200); border-radius:8px; font-size:.85rem; transition:border .2s; background:#fff; color:#1e293b; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--primary); }
/* Sem isso o Chrome pinta o campo autopreenchido de preto (autofill + tema escuro do SO),
   deixando o texto ilegível — força o mesmo fundo/cor branco usado no resto do formulário. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  -webkit-text-fill-color: #1e293b;
  caret-color: #1e293b;
  transition: background-color 5000s ease-in-out 0s;
}
.form-btns { display:flex; gap:.75rem; margin-top:1.25rem; }
.hint { font-size:.78rem; color:var(--gray-500); margin-bottom:.75rem; }
.page-actions { display:flex; gap:.75rem; margin-bottom:1rem; flex-wrap:wrap; }
.filters-bar { display:flex; gap:.5rem; margin-bottom:1rem; flex-wrap:wrap; align-items:center; }
.filter-input { padding:.45rem .7rem; border:1.5px solid var(--gray-200); border-radius:8px; font-size:.8rem; }
.filter-input:focus { outline:none; border-color:var(--primary); }
.span-3 { grid-column:span 3; }

/* LOGO UPLOAD */
.logo-upload-area { display:flex; align-items:center; gap:1rem; }
.logo-preview { width:120px; height:80px; border:2px dashed var(--gray-200); border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; }
.logo-preview img { max-width:100%; max-height:100%; object-fit:contain; }
#logo-placeholder { text-align:center; color:var(--gray-400); font-size:.75rem; }
#logo-placeholder i { display:block; font-size:1.5rem; margin-bottom:.3rem; }

/* PROPOSTA CARDS */
.proposta-card { background:#fff; border-radius:var(--radius); padding:1.25rem; box-shadow:var(--shadow); border-left:4px solid var(--primary); margin-bottom:1rem; }
.proposta-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:.75rem; }
.proposta-id { font-weight:700; color:var(--primary); font-size:.85rem; }
.proposta-badge { padding:.2rem .6rem; border-radius:12px; font-size:.7rem; font-weight:600; color:#fff; }
.b-pendente { background:#f59e0b; }
.b-em_analise { background:#3b82f6; }
.b-aprovada { background:#10b981; }
.b-contrato { background:#8b5cf6; }
.b-concluida { background:#059669; }
.b-recusada { background:#ef4444; }
.b-cancelada { background:#6b7280; }
.proposta-grid { display:grid; grid-template-columns:1fr 1fr; gap:.3rem; font-size:.8rem; color:var(--gray-600); margin-bottom:.75rem; }
.proposta-grid i { color:var(--gray-400); margin-right:.3rem; width:14px; }
.proposta-actions { display:flex; gap:.5rem; flex-wrap:wrap; }

/* IMOVEL CARDS */
.imovel-list { display:flex; flex-direction:column; gap:1rem; }
.imovel-card { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); position:relative; border:1px solid var(--gray-100); }
.imovel-card--horizontal { display:flex; flex-direction:row; overflow:hidden; padding:0; }
.imovel-card-media { position:relative; flex:0 0 240px; width:240px; min-height:200px; background:var(--gray-100); overflow:hidden; }
.imovel-card-media .imovel-capa { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; margin:0; border-radius:0; }
.imovel-card-media-empty { width:100%; height:100%; min-height:200px; display:flex; align-items:center; justify-content:center; color:var(--gray-300); font-size:2.5rem; background:linear-gradient(135deg,var(--gray-100),var(--gray-200)); }
.imovel-card .imovel-status { position:absolute; top:.65rem; left:.65rem; z-index:2; padding:.25rem .55rem; border-radius:999px; font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:0 2px 8px rgba(0,0,0,.12); }
.imovel-card .imovel-status.disponivel { background:rgba(220,252,231,.92); color:#15803d; }
.imovel-card .imovel-status.reservado { background:rgba(254,243,199,.92); color:#b45309; }
.imovel-card .imovel-status.vendido { background:rgba(254,226,226,.92); color:#b91c1c; }
.imovel-card .imovel-status.locado { background:rgba(219,234,254,.92); color:#1d4ed8; }
.imovel-share-btn { position:absolute; top:.65rem; right:.65rem; z-index:3; display:inline-flex; align-items:center; gap:.35rem; padding:.4rem .65rem; border:1px solid rgba(255,255,255,.35); border-radius:999px; background:rgba(15,23,42,.35); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:#fff; font-size:.72rem; font-weight:600; cursor:pointer; transition:background .15s,transform .15s; }
.imovel-share-btn:hover { background:rgba(15,23,42,.55); transform:translateY(-1px); }
.imovel-share-btn i { font-size:.78rem; }
.imovel-card-body { flex:1; min-width:0; padding:1rem 1.25rem; display:flex; flex-direction:column; gap:.45rem; }
.imovel-card-head { display:flex; flex-direction:column; align-items:flex-start; gap:.35rem; }
.imovel-codigo { display:inline-block; background:var(--primary); color:#fff; font-size:.65rem; font-weight:700; padding:.18rem .55rem; border-radius:6px; letter-spacing:.04em; }
.imovel-card-title { font-size:.95rem; font-weight:700; color:var(--gray-800); line-height:1.35; margin:0; }
.imovel-card .imovel-info { font-size:.78rem; color:var(--gray-500); line-height:1.55; }
.imovel-card .imovel-info i { color:var(--gray-400); width:14px; margin-right:.15rem; }
.imovel-card .imovel-info i.fa-city { color:var(--purple); }
.imovel-card .imovel-details { display:flex; gap:.45rem; flex-wrap:wrap; margin-top:.15rem; }
.imovel-card .imovel-details span { display:inline-flex; align-items:center; gap:.2rem; font-size:.72rem; font-weight:500; color:var(--gray-600); background:var(--gray-50); border:1px solid var(--gray-200); padding:.22rem .5rem; border-radius:999px; }
.imovel-card .imovel-details span i { color:var(--gray-400); font-size:.68rem; }
.imovel-card-footer { margin-top:auto; padding-top:.85rem; border-top:1px solid var(--gray-100); display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.imovel-card .imovel-valor { font-size:1.15rem; font-weight:800; color:var(--primary); white-space:nowrap; }
.imovel-card .imovel-actions { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; justify-content:flex-end; flex:1; min-width:0; }
.imovel-actions-group { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.imovel-actions-social { padding-right:.5rem; margin-right:.15rem; border-right:1px solid var(--gray-200); }
.btn-imovel { display:inline-flex; align-items:center; justify-content:center; gap:.35rem; height:2rem; padding:0 .65rem; border-radius:8px; font-size:.72rem; font-weight:600; border:none; cursor:pointer; transition:all .15s; white-space:nowrap; }
.btn-imovel:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.1); }
.btn-imovel i { font-size:.78rem; }
.btn-imovel-instagram { background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#bc1888); color:#fff; }
.btn-imovel-facebook { background:#1877f2; color:#fff; }
.btn-imovel-ambos { background:var(--gray-800); color:#fff; }
.btn-imovel-ghost { background:#fff; color:var(--gray-600); border:1px solid var(--gray-200); }
.btn-imovel-ghost:hover { background:var(--gray-50); border-color:var(--gray-300); }
.btn-imovel-danger { background:#fff; color:var(--red); border:1px solid rgba(220,38,38,.25); }
.btn-imovel-danger:hover { background:#fef2f2; border-color:rgba(220,38,38,.4); }
.anuncio-card { padding:1.25rem; }
.anuncio-card .imovel-capa { position:static; width:100%; height:160px; object-fit:cover; border-radius:8px; margin-bottom:.6rem; }
.anuncio-card .imovel-status { top:.75rem; left:auto; right:.75rem; }
.anuncio-card h4 { font-size:.9rem; margin-bottom:.5rem; color:var(--gray-800); padding-right:5rem; }

/* CLIENTE CARDS */
.cliente-card { background:#fff; border-radius:var(--radius); padding:1.25rem; box-shadow:var(--shadow); }
.cliente-card h4 { font-size:.9rem; margin-bottom:.3rem; }
.cliente-card .cliente-info { font-size:.78rem; color:var(--gray-500); margin-bottom:.5rem; line-height:1.6; }
.cliente-card .cliente-actions { display:flex; gap:.5rem; }
.cliente-card .cliente-obs { font-size:.76rem; color:#92400e; background:#fffbeb; border:1px solid #fde68a; border-radius:6px; padding:.4rem .55rem; margin-bottom:.6rem; line-height:1.4; }

/* CORRETOR CARDS */
.corretor-card { background:#fff; border-radius:var(--radius); padding:1.25rem; box-shadow:var(--shadow); }
.corretor-card h4 { font-size:.9rem; margin-bottom:.3rem; }
.corretor-card .corretor-info { font-size:.78rem; color:var(--gray-500); line-height:1.6; }

/* SPREADSHEET */
.spreadsheet-container { overflow:auto; max-height:500px; border:1px solid var(--gray-200); border-radius:8px; }
.spreadsheet-container table { border-collapse:collapse; width:100%; }
.spreadsheet-container th { background:var(--gray-100); padding:.4rem .6rem; font-size:.72rem; font-weight:600; color:var(--gray-600); border:1px solid var(--gray-200); text-align:center; position:sticky; top:0; z-index:1; min-width:100px; }
.spreadsheet-container td { padding:0; border:1px solid var(--gray-200); min-width:100px; height:30px; }
.spreadsheet-container td input { width:100%; height:100%; border:none; padding:.3rem .5rem; font-size:.8rem; background:transparent; }
.spreadsheet-container td input:focus { outline:2px solid var(--primary); outline-offset:-2px; background:#fff; }
.spreadsheet-container td.active { outline:2px solid var(--primary); outline-offset:-2px; }
.spreadsheet-container .row-num { background:var(--gray-100); text-align:center; font-size:.7rem; color:var(--gray-500); font-weight:600; width:40px; min-width:40px; padding:.3rem; }
.spreadsheet-toolbar { background:var(--gray-50); padding:.5rem; border-radius:8px; }

/* TIMELINE */
.timeline-list { position:relative; padding-left:1.5rem; }
.timeline-list::before { content:''; position:absolute; left:.5rem; top:0; bottom:0; width:2px; background:var(--gray-200); }
.tl-item { position:relative; margin-bottom:1.25rem; }
.tl-item::before { content:''; position:absolute; left:-1rem; top:.4rem; width:10px; height:10px; background:var(--primary); border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 2px var(--primary); }
.tl-item .tl-date { font-size:.7rem; color:var(--gray-400); }
.tl-item .tl-desc { font-size:.85rem; color:var(--gray-700); margin-top:.15rem; }

/* PLANILHA MENU CARDS */
.planilha-menu-card { background:#fff; border-radius:var(--radius); padding:1.25rem; box-shadow:var(--shadow); cursor:pointer; transition:all .15s; }
.planilha-menu-card:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(0,0,0,.1); }
.planilha-menu-card h4 { font-size:.9rem; margin-bottom:.3rem; }
.planilha-menu-card .meta { font-size:.72rem; color:var(--gray-400); }

/* TOAST */
.toast { position:fixed; bottom:2rem; right:2rem; padding:.75rem 1.25rem; border-radius:10px; font-size:.85rem; font-weight:500; color:#fff; z-index:9999; animation:slideIn .3s; }
.toast.ok { background:var(--green); }
.toast.err { background:var(--red); }
.toast.inf { background:var(--blue); }
@keyframes slideIn { from { transform:translateY(20px); opacity:0; } to { transform:translateY(0); opacity:1; } }

/* MOBILE */
.mobile-only { display:none; }
@media(max-width:768px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .sidebar-overlay { display:block; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:90; opacity:0; pointer-events:none; transition:opacity .3s; }
  .sidebar-overlay.active { opacity:1; pointer-events:auto; }
  .main { margin-left:0; }
  .content::before { background-size:min(55vw,220px); }
  .mobile-only { display:inline-flex; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .grid-3, .grid-4 { grid-template-columns:1fr; }
  .grid-2 { grid-template-columns:1fr; }
  .topbar h2 { font-size:.9rem; }
  .search-wrapper { display:none; }
}
@media(max-width:480px) {
  .stats-grid { grid-template-columns:1fr; }
  .grid-cards { grid-template-columns:1fr; }
}

/* MODAL */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:9000; padding:1rem; }
.modal-box { background:#fff; border-radius:16px; padding:2rem; max-width:900px; width:100%; max-height:90vh; overflow-y:auto; position:relative; }
.modal-wide { max-width:800px; }
.modal-x { position:absolute; top:1rem; right:1rem; background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--gray-500); }
.modal-actions { display:flex; gap:.75rem; margin-top:1.5rem; justify-content:center; }
.modal-post-redes { max-width:720px; }
.post-fotos-grid { display:flex; flex-wrap:wrap; gap:.65rem; max-height:220px; overflow-y:auto; padding:.25rem; }
.post-foto-item { position:relative; width:96px; border:2px solid var(--gray-200); border-radius:10px; overflow:hidden; background:#fff; }
.post-foto-item.selecionada { border-color:var(--primary); box-shadow:0 0 0 2px rgba(99,102,241,.25); }
.post-foto-item img { width:100%; height:72px; object-fit:cover; display:block; }
.post-foto-item label { display:flex; flex-direction:column; cursor:pointer; margin:0; }
.post-foto-item .post-foto-ctrl { display:flex; align-items:center; justify-content:space-between; padding:2px 4px; font-size:.65rem; background:#f8fafc; }
.post-foto-item .post-foto-ordem { font-weight:700; color:var(--primary); min-width:1.2rem; text-align:center; }
.post-foto-item .post-foto-btns button { border:none; background:none; cursor:pointer; color:var(--gray-500); padding:0 2px; font-size:.7rem; }
.post-foto-item .post-foto-btns button:hover { color:var(--primary); }
.imovel-actions-social { display:flex; flex-wrap:wrap; gap:.4rem; }
.imovel-actions-social .btn-imovel { font-size:.72rem; }

/* PRINT */
@media print {
  body * { visibility:hidden; }
  #modal-relatorio, #modal-relatorio * { visibility:visible; }
  #modal-relatorio { position:absolute; left:0; top:0; width:100%; }
  .modal-overlay { position:absolute; background:#fff; }
  .modal-x, .modal-actions, .sidebar, .topbar, .app-footer { display:none !important; }
}

/* IMOVEL FOTOS */
.imovel-fotos-grid { display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; margin-top:.25rem; }
.imovel-fotos-grid img, .imovel-foto-thumb { width:52px; height:40px; object-fit:cover; border-radius:6px; border:1px solid var(--gray-200); }
.imovel-fotos-more { font-size:.68rem; color:var(--gray-400); font-weight:600; padding:.15rem .35rem; background:var(--gray-50); border-radius:6px; }
.imovel-capa { width:100%; height:160px; object-fit:cover; border-radius:8px; margin-bottom:.6rem; }

/* FOTO PRINCIPAL (form) */
.foto-thumb-wrap { position:relative; width:100px; height:75px; border-radius:8px; overflow:hidden; border:2px solid var(--gray-200); }
.foto-thumb-wrap.principal { border-color:#f59e0b; box-shadow:0 0 0 2px rgba(245,158,11,.3); }
.foto-thumb-wrap img { width:100%; height:100%; object-fit:cover; }
.foto-thumb-wrap .foto-star, .foto-thumb-wrap .foto-del { position:absolute; top:3px; width:22px; height:22px; border:none; border-radius:50%; cursor:pointer; font-size:.6rem; display:flex; align-items:center; justify-content:center; color:#fff; }
.foto-thumb-wrap .foto-star { left:3px; background:rgba(245,158,11,.9); }
.foto-thumb-wrap .foto-del { right:3px; background:rgba(220,38,38,.9); }
.foto-thumb-wrap .foto-tag { position:absolute; bottom:0; left:0; right:0; background:rgba(245,158,11,.95); color:#fff; font-size:.58rem; font-weight:700; text-align:center; padding:1px 0; text-transform:uppercase; }

/* LEADS */
.nav-badge { margin-left:auto; background:var(--red); color:#fff; font-size:.62rem; font-weight:700; min-width:18px; height:18px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; padding:0 5px; }
.lead-card { background:#fff; border-radius:var(--radius); padding:1.25rem; box-shadow:var(--shadow); border-left:4px solid var(--orange); margin-bottom:1rem; }
.lead-card.l-convertido { border-left-color:var(--green); opacity:.85; }
.lead-card.l-perdido { border-left-color:var(--gray-400); opacity:.7; }
.lead-card.l-em_atendimento { border-left-color:var(--blue); }
.lead-origem { font-size:.62rem; font-weight:700; padding:2px 7px; border-radius:10px; text-transform:uppercase; margin-left:.3rem; background:var(--gray-100); color:var(--gray-600); }
.lead-origem.o-olx { background:#f3e8ff; color:#7c3aed; }
.lead-origem.o-zap { background:#fce7f3; color:#db2777; }
.lead-origem.o-vivareal { background:#dbeafe; color:#2563eb; }
.lead-origem.o-imovelweb { background:#ffedd5; color:#ea580c; }
.lead-origem.o-site { background:#dcfce7; color:#16a34a; }
.lead-origem.o-pagina { background:#fef3c7; color:#b45309; }
.lead-origem.o-link { background:#e0f2fe; color:#0369a1; }
.lead-origem.o-chat { background:#e0e7ff; color:#4f46e5; }
.lead-origem.o-facebook { background:#dbeafe; color:#1877f2; }
.lead-origem.o-instagram { background:#fce7f3; color:#e1306c; }
.lead-origem.o-whatsapp { background:#dcfce7; color:#25d366; }
.lead-origem.o-portal { background:#e2e8f0; color:#475569; }
.share-ref-grid { display:flex; flex-wrap:wrap; gap:.45rem; }
.share-ref-grid .share-ref-btn { display:inline-flex; align-items:center; gap:.35rem; border:1.5px solid var(--gray-200); border-radius:10px; padding:.45rem .65rem; }

/* Ícones de origem (Leads, Atendimento, chat) */
.origem-icone { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; border-radius:50%; font-size:.72rem; margin-right:.35rem; vertical-align:middle; flex-shrink:0; }
.origem-icone i { line-height:1; }
.origem-icone.origem-site { background:#dcfce7; color:#16a34a; }
.origem-icone.origem-pagina { background:#fef3c7; color:#b45309; }
.origem-icone.origem-chat { background:#e0e7ff; color:#4f46e5; }
.origem-icone.origem-whatsapp { background:#dcfce7; color:#25d366; }
.origem-icone.origem-facebook { background:#dbeafe; color:#1877f2; }
.origem-icone.origem-instagram { background:#fce7f3; color:#e1306c; }
.origem-icone.origem-portal { background:#f1f5f9; color:#475569; }
.origem-icone.origem-manual { background:var(--gray-100); color:var(--gray-600); }
.origem-badge { font-size:.52rem; font-weight:800; padding:1px 5px; border-radius:4px; letter-spacing:.02em; white-space:nowrap; }
.origem-icone.origem-olx .origem-badge { background:#f3e8ff; color:#7c3aed; }
.origem-icone.origem-zap .origem-badge { background:#fce7f3; color:#db2777; }
.origem-icone.origem-vivareal .origem-badge { background:#dbeafe; color:#2563eb; }
.origem-icone.origem-imovelweb .origem-badge { background:#ffedd5; color:#ea580c; }
.chat-header-info .origem-icone { display:inline-flex; vertical-align:middle; margin-right:.25rem; }
.lead-card .proposta-top > div { display:flex; align-items:center; flex-wrap:wrap; gap:.15rem; }

.lead-badge { padding:.2rem .6rem; border-radius:12px; font-size:.7rem; font-weight:600; color:#fff; }
.lb-novo { background:#f59e0b; }
.lb-em_atendimento { background:#3b82f6; }
.lb-convertido { background:#059669; }
.lb-perdido { background:#6b7280; }

.view-toggle-group { margin-left:auto; display:flex; gap:.3rem; flex-wrap:wrap; }
.view-toggle-ativo { background:var(--orange) !important; color:#fff !important; }

/* KANBAN de leads/atendimento — tempo real via SSE, arrastar card muda o status.
   max-width:100% é o que de fato contém o scroll DENTRO do board — sem isso, o board (um
   flex container com conteúdo mais largo que a tela) empurra a página inteira pro lado no
   mobile, em vez de só ele mesmo rolar horizontalmente. */
.kanban-board { display:flex; gap:1rem; overflow-x:auto; max-width:100%; padding-bottom:.5rem; align-items:flex-start; }
.kanban-col { flex:0 0 290px; background:var(--gray-50); border-radius:var(--radius); display:flex; flex-direction:column; max-height:calc(100vh - 260px); min-height:200px; transition:background .15s; }
.kanban-col.drag-over { background:#dbeafe; }
.kanban-col-header { padding:.7rem .9rem; font-weight:700; font-size:.85rem; display:flex; justify-content:space-between; align-items:center; border-bottom:3px solid; border-radius:var(--radius) var(--radius) 0 0; color:#fff; }
.kanban-col-header.kh-novo { background:#f59e0b; border-color:#d97706; }
.kanban-col-header.kh-em_atendimento { background:#3b82f6; border-color:#2563eb; }
.kanban-col-header.kh-convertido { background:#059669; border-color:#047857; }
.kanban-col-header.kh-perdido { background:#6b7280; border-color:#4b5563; }
.kanban-col-count { background:rgba(255,255,255,.3); border-radius:10px; padding:.05rem .5rem; font-size:.75rem; }
.kanban-col-body { flex:1; overflow-y:auto; padding:.6rem; }
.kanban-card { background:#fff; border-radius:8px; padding:.65rem .75rem; margin-bottom:.6rem; box-shadow:var(--shadow); cursor:grab; border-left:3px solid var(--orange); transition:box-shadow .15s, transform .1s; }
.kanban-card:hover { box-shadow:0 4px 14px rgba(0,0,0,.12); }
.kanban-card.dragging { opacity:.4; transform:scale(.97); }
.kanban-card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:.4rem; margin-bottom:.3rem; }
.kanban-card-nome { font-weight:600; font-size:.85rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kanban-card-msg { font-size:.75rem; color:var(--gray-600); background:var(--gray-50); padding:.35rem .5rem; border-radius:6px; margin:.35rem 0; display:flex; justify-content:space-between; gap:.4rem; align-items:flex-start; }
.kanban-card-msg-texto { overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.kanban-card-foot { display:flex; justify-content:space-between; align-items:center; font-size:.68rem; color:var(--gray-400); margin-top:.3rem; }
.kanban-card-nao-lido { width:8px; height:8px; border-radius:50%; background:#ef4444; display:inline-block; margin-left:.3rem; flex-shrink:0; }

/* AGENDAMENTOS DE VISITA */
.agenda-grupo { margin-bottom:1.5rem; }
.agenda-grupo-titulo { font-weight:700; color:var(--gray-600); font-size:.85rem; text-transform:uppercase; letter-spacing:.03em; margin-bottom:.6rem; padding-bottom:.4rem; border-bottom:2px solid var(--gray-100); }
.agenda-dia-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:.75rem; }
.agenda-card { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:1rem; border-left:4px solid var(--purple); cursor:pointer; transition:box-shadow .15s; }
.agenda-card:hover { box-shadow:0 4px 14px rgba(0,0,0,.12); }
.agenda-card.atrasado { border-left-color:#dc2626; opacity:.8; }
.agenda-card-hora { font-weight:700; color:var(--purple); font-size:1.1rem; display:flex; align-items:center; gap:.4rem; }
.agenda-card.atrasado .agenda-card-hora { color:#dc2626; }
.agenda-card-acoes { display:flex; gap:.25rem; margin-top:.6rem; padding-top:.5rem; border-top:1px solid var(--gray-100); }
/* Mesmo padrão visual do card de Imóveis (.imovel-card--horizontal/.imovel-card-media) —
   pedido explícito do cliente pra Agenda usar o mesmo tamanho/proporção de foto. Card com
   foto sempre ocupa a linha INTEIRA do grid (nunca fica preso numa coluna estreita de
   ~260px do auto-fill), senão sobra pouca largura pro texto e quebra linha palavra-por-palavra. */
/* align-items:flex-start (não stretch): a Agenda tem menos linhas de texto que o card de
   Imóveis, então "esticar" a foto pra acompanhar a altura do corpo a deixava mais alta/
   "grande" que o padrão de referência. height FIXO (não min-height) trava a foto exatamente
   no mesmo tamanho do card de Imóveis, não importa quanto texto tiver ao lado. */
.agenda-card.com-foto { display:flex; overflow:hidden; padding:0; align-items:flex-start; grid-column:1 / -1; }
.agenda-card-foto-lateral { flex:0 0 240px; width:240px; min-width:240px; height:200px; object-fit:cover; }
.agenda-card-corpo { flex:1; min-width:0; padding:1rem 1.25rem; }

/* Avatar com foto real (Instagram/Facebook) — combina com a classe de tamanho já existente
   no elemento (chat-contato-avatar, chat-header-avatar, ou avatar-sm nas telas novas). O
   WhatsApp não fornece foto de perfil via API oficial — isso só populará pra contatos que
   vieram de Instagram/Facebook, quando a Meta devolver a foto (nem sempre devolve). */
.avatar-foto { object-fit:cover; flex-shrink:0; }
/* Foto de perfil do cliente (vem do WhatsApp) — sempre presa ao círculo do avatar; sem isso a
   imagem saía no tamanho original e cobria o topo da conversa. */
.chat-header-avatar { overflow:hidden; }
.chat-header-avatar img, .chat-header-avatar .avatar-foto { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
img.avatar-foto:not([class*="avatar-sm"]):not([class*="avatar-lg"]):not([class*="chat-contato-avatar"]) { max-width:48px; max-height:48px; border-radius:50%; }
.avatar-sm { width:28px; height:28px; min-width:28px; border-radius:50%; background:linear-gradient(135deg,#25d366,#128c7e); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.68rem; font-weight:700; }
/* Mesmo breakpoint/comportamento do card de Imóveis (.imovel-card--horizontal) no celular:
   empilha foto em cima (largura total, 16:10) e corpo embaixo, em vez de espremer os dois
   lado a lado numa tela estreita. */
@media (max-width:768px) {
  .agenda-card.com-foto { flex-direction:column; }
  .agenda-card-foto-lateral { width:100%; flex:none; min-width:0; min-height:0; aspect-ratio:16/10; }
}

/* ATUALIZAÇÕES */
.atualizacao-release-resumo { list-style:none; cursor:pointer; padding:1.5rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; font-size:.85rem; color:var(--gray-600); font-weight:600; }
.atualizacao-release-resumo::-webkit-details-marker { display:none; }
.atualizacao-release-resumo::before { content:"\f105"; font-family:"Font Awesome 6 Free"; font-weight:900; margin-right:.5rem; transition:transform .15s; display:inline-block; }
.atualizacao-release[open] .atualizacao-release-resumo::before { transform:rotate(90deg); }
.atualizacao-release-badge { font-size:.68rem; font-weight:700; color:var(--primary,#4f46e5); background:#eef2ff; padding:.2rem .6rem; border-radius:20px; }
.atualizacao-release-corpo { padding:0 1.5rem 1.5rem; }

/* ATENDIMENTO (CHAT ESTILO WHATSAPP) */
.badge-chat { background:#25d366; }
.chat-wrapper { display:flex; height:calc(100vh - 150px); min-height:480px; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }

/* Coluna de contatos */
.chat-contacts { width:360px; min-width:280px; border-right:1px solid var(--gray-200); display:flex; flex-direction:column; background:#fff; }
.chat-contacts-header { padding:.75rem; background:var(--gray-50); border-bottom:1px solid var(--gray-200); display:flex; flex-direction:column; gap:.5rem; }
.chat-search { position:relative; }
.chat-search i { position:absolute; left:.85rem; top:50%; transform:translateY(-50%); color:var(--gray-400); font-size:.75rem; }
.chat-search input { width:100%; padding:.5rem .9rem .5rem 2.2rem; border:1.5px solid var(--gray-200); border-radius:20px; font-size:.82rem; background:#fff; }
.chat-search input:focus { outline:none; border-color:#25d366; }
/* Indicador de conexão em tempo real (SSE) — reflete estado real conhecido pela aplicação,
   nunca um "sempre verde" enganoso. */
.chat-conexao-status { display:flex; align-items:center; gap:.4rem; font-size:.7rem; font-weight:600; color:var(--gray-500); padding:.3rem 1.25rem; }
.chat-conexao-status .dot { width:8px; height:8px; border-radius:50%; background:#9ca3af; flex-shrink:0; }
.chat-conexao-status.conectado .dot { background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.18); }
.chat-conexao-status.sincronizando .dot { background:#f59e0b; }
.chat-conexao-status.desconectado .dot { background:#ef4444; }
#chat-filtro-corretor { width:100%; border-radius:8px; }
/* Chips de filtro por status da conversa (Não lidas/Minhas/Sem responsável/Aguardando
   cliente ou corretor/Em atendimento/Arquivadas) — tudo derivado de dado que já existe. */
.chat-filtros-chips { display:flex; gap:.35rem; flex-wrap:wrap; padding:.5rem .75rem; background:var(--gray-50); border-bottom:1px solid var(--gray-200); }
.chat-filtro-chip { border:1px solid var(--gray-200); background:#fff; color:var(--gray-600); border-radius:14px; padding:.3rem .65rem; font-size:.7rem; font-weight:600; cursor:pointer; white-space:nowrap; transition:.15s; }
.chat-filtro-chip:hover { border-color:#25d366; }
.chat-filtro-chip.is-active { background:#25d366; border-color:#25d366; color:#fff; }
.chat-contacts-list { flex:1; overflow-y:auto; }
.chat-contato { display:flex; gap:.75rem; padding:.75rem .9rem; cursor:pointer; border-bottom:1px solid var(--gray-100); transition:background .12s; align-items:flex-start; }
.chat-contato:hover { background:var(--gray-50); }
.chat-contato.ativo { background:#f0f2f5; }
.chat-contato-avatar { width:44px; height:44px; min-width:44px; border-radius:50%; background:linear-gradient(135deg,#25d366,#128c7e); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:700; }
.chat-contato-corpo { flex:1; min-width:0; }
.chat-contato-topo { display:flex; justify-content:space-between; align-items:center; gap:.5rem; }
.chat-contato-nome { display:flex; align-items:center; min-width:0; flex:1; }
.chat-contato-topo .origem-icone { margin-right:.3rem; flex-shrink:0; }
.chat-contato-topo strong { font-size:.85rem; color:var(--gray-800); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-contato-hora { font-size:.66rem; color:var(--gray-400); white-space:nowrap; }
.chat-contato.nao-lido .chat-contato-hora { color:#25d366; font-weight:700; }
.chat-contato-preview { display:flex; justify-content:space-between; align-items:center; gap:.4rem; font-size:.76rem; color:var(--gray-500); margin-top:.1rem; }
.chat-contato-preview span:first-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-contato.nao-lido .chat-contato-preview span:first-child { color:var(--gray-700); font-weight:600; }
.chat-dot { width:10px; height:10px; min-width:10px; border-radius:50%; background:#25d366; }
.chat-contato-meta { display:flex; gap:.5rem; flex-wrap:wrap; font-size:.66rem; color:var(--gray-400); margin-top:.25rem; align-items:center; }
.chat-contato-meta i { margin-right:.2rem; }
.chat-contato-corretor { color:var(--purple); font-weight:600; }
.chat-sem-contatos { text-align:center; padding:2.5rem 1.5rem; color:var(--gray-400); font-size:.82rem; line-height:1.6; }
.chat-sem-contatos i { font-size:2rem; color:#25d366; display:block; margin-bottom:.75rem; }

/* Painel da conversa */
.chat-panel { flex:1; display:flex; flex-direction:column; background:#efeae2; min-width:0; }
.chat-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2rem; color:var(--gray-500); background:var(--gray-50); }
.chat-empty-icon { width:80px; height:80px; border-radius:50%; background:#dcfce7; color:#25d366; display:flex; align-items:center; justify-content:center; font-size:2.2rem; margin-bottom:1rem; }
.chat-empty h3 { font-size:1.05rem; color:var(--gray-700); margin-bottom:.5rem; }
.chat-empty p { font-size:.85rem; line-height:1.6; margin-bottom:1rem; }
.chat-empty small { font-size:.72rem; color:var(--gray-400); }

/* Coluna 3: perfil do cliente/lead (opcional, liga/desliga) — pedido explícito: dados do
   contato, imóvel de interesse, propostas/tarefas vinculadas, observações e tags num só
   lugar, sem precisar sair do Atendimento pra procurar em outra aba. Fica escondida por
   padrão (display:none) e só aparece com a classe .perfil-aberto no chat-wrapper — feita
   pra caber SEM empurrar as outras duas colunas pra fora em telas menores de desktop. */
.chat-perfil { display:none; width:300px; min-width:260px; border-left:1px solid var(--gray-200); flex-direction:column; background:#fff; overflow-y:auto; }
.chat-wrapper.perfil-aberto .chat-perfil { display:flex; }
.chat-perfil-header { display:flex; align-items:center; justify-content:space-between; padding:.85rem 1rem; border-bottom:1px solid var(--gray-200); background:var(--gray-50); flex-shrink:0; }
.chat-perfil-header strong { font-size:.85rem; color:var(--gray-800); }
.chat-perfil-corpo { padding:1rem; display:flex; flex-direction:column; gap:1rem; }
.perfil-avatar-bloco { display:flex; flex-direction:column; align-items:center; text-align:center; gap:.4rem; padding-bottom:.5rem; border-bottom:1px solid var(--gray-100); }
.perfil-avatar-bloco .avatar-lg { width:64px; height:64px; border-radius:50%; }
.perfil-avatar-bloco strong { font-size:.92rem; color:var(--gray-800); }
.perfil-secao { display:flex; flex-direction:column; gap:.4rem; }
.perfil-secao-titulo { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--gray-400); }
.perfil-linha { display:flex; align-items:center; gap:.5rem; font-size:.8rem; color:var(--gray-700); }
.perfil-linha i { width:16px; color:var(--gray-400); flex-shrink:0; }
.perfil-linha a { color:inherit; text-decoration:none; }
.perfil-linha a:hover { text-decoration:underline; }
.perfil-vazio { font-size:.76rem; color:var(--gray-400); font-style:italic; }
.perfil-item-lista { display:flex; align-items:center; justify-content:space-between; gap:.5rem; font-size:.78rem; padding:.4rem .5rem; background:var(--gray-50); border-radius:8px; cursor:pointer; }
.perfil-item-lista:hover { background:var(--gray-100); }
.perfil-tags { display:flex; flex-wrap:wrap; gap:.3rem; }
.perfil-tag { display:inline-flex; align-items:center; gap:.3rem; background:#ede9fe; color:var(--purple); font-size:.7rem; font-weight:600; padding:.2rem .55rem; border-radius:12px; }
.perfil-tag button { background:none; border:none; color:inherit; cursor:pointer; padding:0; font-size:.7rem; opacity:.6; }
.perfil-tag button:hover { opacity:1; }
.perfil-tags input { border:1px dashed var(--gray-300); border-radius:12px; padding:.2rem .55rem; font-size:.7rem; width:90px; }
.perfil-obs textarea { width:100%; border:1.5px solid var(--gray-200); border-radius:8px; padding:.5rem; font-size:.8rem; resize:vertical; min-height:70px; font-family:inherit; }
.perfil-obs textarea:focus { outline:none; border-color:#25d366; }
.perfil-obs-status { font-size:.66rem; color:var(--gray-400); }

/* Lightbox — ver foto/vídeo da conversa em tamanho grande sem sair da tela (fecha e volta
   pro mesmo scroll, ao contrário de abrir numa aba nova do navegador). */
.lightbox-overlay { position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:9500; display:flex; align-items:center; justify-content:center; padding:2rem; }
.lightbox-corpo { display:flex; align-items:center; justify-content:center; }
.lightbox-fechar { position:absolute; top:1rem; right:1rem; width:42px; height:42px; border-radius:50%; border:none; background:rgba(255,255,255,.12); color:#fff; font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.lightbox-fechar:hover { background:rgba(255,255,255,.25); }
/* Botão de expandir sobre o vídeo recebido/enviado — o <video> já tem controles nativos de
   play/pause/fullscreen do navegador, mas "tela cheia" nativa é abrupta; isso abre no MESMO
   lightbox usado pra foto, mantendo a experiência consistente entre os dois tipos de mídia. */
.chat-video-wrap { position:relative; display:inline-block; }
.chat-video-expandir { position:absolute; top:.4rem; right:.4rem; width:28px; height:28px; border-radius:6px; border:none; background:rgba(0,0,0,.55); color:#fff; font-size:.72rem; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.chat-video-expandir:hover { background:rgba(0,0,0,.75); }
@media(max-width:768px) {
  .lightbox-overlay { padding:.75rem; }
  .lightbox-fechar { top:.5rem; right:.5rem; }
}
.chat-empty small i { color:#25d366; margin-right:.3rem; }
.chat-conversa { flex:1; display:flex; flex-direction:column; min-height:0; }
.chat-header { display:flex; flex-direction:column; padding:.6rem .9rem; background:#f0f2f5; border-bottom:1px solid var(--gray-200); }
.chat-header-topo { display:flex; align-items:center; gap:.75rem; width:100%; }
.chat-voltar { display:none; }
.chat-header-avatar { width:40px; height:40px; min-width:40px; border-radius:50%; background:linear-gradient(135deg,#25d366,#128c7e); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; }
.chat-header-info { flex:1; min-width:0; }
.chat-header-info strong { display:block; font-size:.88rem; color:var(--gray-800); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-header-info span { display:block; font-size:.7rem; color:var(--gray-500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-header-actions { display:flex; gap:.4rem; flex-wrap:wrap; justify-content:flex-end; }
/* Linha própria, largura TOTAL do cabeçalho (do início até onde "Transferir" termina) — não
   mais espremida na coluna estreita do nome/telefone. Título de anúncio da Meta costuma vir
   com bullets ("✓ 2 quartos ✓ Vaga...") e precisa de espaço de verdade pra não cortar. */
.chat-anuncio-linha { display:flex; align-items:center; gap:.5rem; width:100%; margin-top:.5rem; padding-top:.5rem; border-top:1px dashed var(--gray-300); font-size:.76rem; color:var(--gray-600); line-height:1.4; }
.chat-btn-wa { background:#25d366; color:#fff; }

/* Aviso webhook WhatsApp + registro manual de resposta */
.chat-webhook-aviso { padding:.55rem .9rem; font-size:.72rem; line-height:1.45; border-bottom:1px solid var(--gray-200); }
.chat-webhook-aviso.aviso-warn { background:#fffbeb; color:#92400e; }
.chat-webhook-aviso.aviso-ok { background:#ecfdf5; color:#047857; }
.chat-webhook-aviso a { color:inherit; font-weight:600; text-decoration:underline; }
.chat-resposta-manual { padding:.65rem .9rem; background:#fff; border-top:1px solid var(--gray-200); border-bottom:1px solid var(--gray-200); }
.chat-resposta-manual label { display:block; font-size:.72rem; font-weight:600; color:var(--gray-600); margin-bottom:.35rem; }
.chat-resposta-manual textarea { width:100%; padding:.55rem .75rem; border:1.5px solid var(--gray-200); border-radius:8px; font-size:.82rem; resize:vertical; min-height:64px; font-family:inherit; }
.chat-resposta-manual textarea:focus { outline:none; border-color:#25d366; }
.chat-resposta-manual-btns { display:flex; gap:.5rem; margin-top:.5rem; flex-wrap:wrap; }
.chat-resposta-manual-quem { display:flex; flex-direction:column; gap:.3rem; margin-bottom:.55rem; }
.chat-resposta-manual-quem label { display:flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:500; color:var(--gray-700); margin-bottom:0; cursor:pointer; }
.chat-resposta-manual-quem input { margin:0; }
.chat-resposta-manual-aviso { display:block; margin-top:.5rem; font-size:.72rem; color:var(--gray-400); }

/* Mensagens */
.chat-mensagens { flex:1; overflow-y:auto; padding:1rem 1.25rem;
  background:#efeae2;
  background-image:radial-gradient(circle at 20% 30%,rgba(255,255,255,.35) 0,transparent 3px),radial-gradient(circle at 80% 70%,rgba(255,255,255,.3) 0,transparent 3px),radial-gradient(circle at 50% 50%,rgba(0,0,0,.02) 0,transparent 40%);
  background-size:60px 60px,80px 80px,100% 100%; }
.chat-dia { text-align:center; margin:.75rem 0; }
.chat-dia span { display:inline-block; background:rgba(255,255,255,.9); color:var(--gray-500); font-size:.66rem; font-weight:600; padding:.25rem .75rem; border-radius:8px; box-shadow:0 1px 2px rgba(0,0,0,.06); text-transform:uppercase; letter-spacing:.03em; }
.chat-msg { display:flex; margin-bottom:.35rem; }
.chat-msg.de-corretor { justify-content:flex-end; }
.chat-msg.de-cliente { justify-content:flex-start; }
.chat-balao { max-width:72%; padding:.45rem .7rem .35rem; border-radius:10px; font-size:.84rem; color:var(--gray-800); line-height:1.45; box-shadow:0 1px 1px rgba(0,0,0,.08); white-space:pre-wrap; word-break:break-word; position:relative; }
.de-cliente .chat-balao { background:#f1f5f9; border-top-left-radius:2px; }
.de-corretor .chat-balao { background:#dcf8c6; border-top-right-radius:2px; }
.chat-msg-autor { display:block; font-size:.66rem; font-weight:700; color:#128c7e; margin-bottom:.1rem; }
.chat-msg-hora { display:inline-block; font-size:.62rem; color:var(--gray-400); margin-left:.6rem; float:right; margin-top:.55rem; }
.chat-msg-hora i { color:#53bdeb; font-size:.6rem; }
/* Sempre visível (não só no hover) — hover não existe em toque/mobile, e o cliente pediu
   pra poder editar/apagar mensagem enviada direto na conversa. */
.chat-msg-acoes { display:inline-flex; gap:.3rem; margin-left:.5rem; vertical-align:middle; }
.chat-msg-acao-btn { background:none; border:none; padding:2px 5px; cursor:pointer; color:var(--gray-500); font-size:.66rem; opacity:.6; }
.chat-msg-acao-btn:hover { opacity:1; color:var(--primary); }
/* Selinho de reação (emoji) no canto do balão — mesmo lugar visual do WhatsApp real. */
.chat-msg-reacao { position:absolute; bottom:-10px; right:-4px; background:#fff; border-radius:999px; padding:1px 5px; font-size:.85rem; line-height:1.3; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.de-cliente .chat-msg-reacao { right:auto; left:-4px; }
.chat-aviso-sistema span { background:rgba(254,243,199,.9); color:#92400e; text-transform:none; letter-spacing:normal; font-weight:500; max-width:85%; }
.chat-imovel-foto { display:block; width:100%; max-width:220px; border-radius:8px; margin-bottom:.35rem; }
/* Info do anúncio embutida na 1ª mensagem da conversa (além do badge no cabeçalho) — pedido
   explícito: quem lê a conversa vê o link e o anúncio junto da mensagem, sem olhar pro topo. */
/* Card completo do anúncio dentro da conversa ("LeadAdContext") — pedido explícito do
   cliente: card mais largo, mídia grande, hierarquia clara, nunca vídeo dentro de <img>,
   nunca espaço vazio/quebrado quando a mídia falha. Classe própria (lead-ad-card*) — a
   antiga reaproveitava "anuncio-card", que colidia com a classe do card de publicação de
   imóvel em redes sociais (imovel-card.anuncio-card) e herdava um padding que espremia a
   mídia, a causa raiz do "card estreito"/"mídia pequena" reportado. */
.chat-balao-anuncio { max-width:min(420px,88%); padding:.4rem .4rem .35rem; }
.lead-ad-card { margin:0 0 .5rem; border:1px solid rgba(0,0,0,.08); border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.lead-ad-card-badge { background:linear-gradient(135deg,var(--orange),#c2410c); color:#fff; font-size:.7rem; font-weight:700; padding:.4rem .7rem; display:flex; align-items:center; gap:.35rem; letter-spacing:.01em; }
.lead-ad-card-media { position:relative; width:100%; height:220px; background:var(--gray-100); }
.lead-ad-card-img,.lead-ad-card-video { display:block; width:100%; height:100%; object-fit:cover; background:#000; }
.lead-ad-card-media--vazio,.lead-ad-card-media--erro { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.3rem; height:96px; color:var(--gray-400); font-size:.72rem; text-align:center; padding:.5rem; }
.lead-ad-card-media--vazio i,.lead-ad-card-media--erro i { font-size:1.4rem; }
.lead-ad-card-media--erro { color:#b45309; background:#fffbeb; }
.lead-ad-card-media-tag { position:absolute; top:.5rem; left:.5rem; background:rgba(0,0,0,.6); color:#fff; font-size:.66rem; font-weight:600; padding:.2rem .5rem; border-radius:6px; display:flex; align-items:center; gap:.25rem; pointer-events:none; }
.lead-ad-card-corpo { padding:.7rem .8rem .75rem; }
.lead-ad-card-titulo { font-size:.88rem; font-weight:700; color:var(--gray-800); line-height:1.35; }
.lead-ad-card-plataforma { font-size:.72rem; color:var(--gray-500); margin-top:.3rem; display:flex; align-items:center; gap:.3rem; }
.lead-ad-card-imovel { font-size:.78rem; color:var(--gray-700); margin-top:.4rem; padding-top:.4rem; border-top:1px dashed var(--gray-200); display:flex; align-items:center; gap:.35rem; }
.lead-ad-card-acoes { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.6rem; }
.lead-ad-card-acoes .btn { font-size:.72rem; padding:.32rem .6rem; }

/* Barra de digitação */
.chat-input-bar { background:#f0f2f5; border-top:1px solid var(--gray-200); padding:.5rem .9rem .65rem; }
.chat-input-hint { font-size:.66rem; color:var(--gray-500); margin-bottom:.4rem; line-height:1.4; cursor:help; }
.chat-input-hint i { color:#25d366; margin-right:.25rem; }
#chat-form { display:flex; gap:.5rem; align-items:center; }
#chat-texto { flex:1; padding:.65rem 1rem; border:1.5px solid var(--gray-200); border-radius:22px; font-size:.86rem; background:#fff; }
#chat-texto:focus { outline:none; border-color:#25d366; }
.chat-send { width:42px; height:42px; min-width:42px; border:none; border-radius:50%; background:#25d366; color:#fff; font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.chat-send:hover { background:#128c7e; transform:scale(1.05); }
#chat-btn-audio.gravando { background:#dc2626; color:#fff; border-color:#dc2626; animation:gravandoPulse 1.2s ease-in-out infinite; }
@keyframes gravandoPulse { 0%,100%{opacity:1;} 50%{opacity:.6;} }

/* Responsivo: uma coluna por vez no mobile */
@media(max-width:768px) {
  .chat-wrapper { height:calc(100vh - 130px); min-height:400px; }
  .chat-contacts { width:100%; min-width:0; border-right:none; }
  .chat-panel { display:none; }
  .chat-wrapper.chat-open .chat-contacts { display:none; }
  .chat-wrapper.chat-open .chat-panel { display:flex; }
  .chat-voltar { display:inline-flex; }
  .chat-header-actions .btn span { display:none; }
  .chat-balao { max-width:85%; }
  .chat-balao-anuncio { max-width:94%; }
  .lead-ad-card-media { height:180px; }
  /* Sem espaço pra 3ª coluna no mobile — o painel de perfil vira uma tela cheia por cima,
     igual um "sheet", com botão de fechar próprio (nunca esconde as outras colunas). */
  .chat-wrapper.perfil-aberto .chat-perfil { position:fixed; inset:0; z-index:60; width:100%; min-width:0; border-left:none; }
  /* .page tem position:relative + z-index:1 (pra outros elementos internos), o que cria um
     contexto de empilhamento próprio — sem isso, o painel de perfil (fixed, z-index:60)
     ficava PRESO dentro desse contexto e nunca conseguia ficar por cima da .topbar
     (position:sticky, z-index:50), mesmo com z-index maior. Só sobe quando o painel está
     aberto, pra não afetar em nada o comportamento normal da tela de Atendimento. */
  #page-atendimento.page:has(.chat-wrapper.perfil-aberto) { z-index:70; }
}

/* RELATORIO PRINT */
.relatorio-header { text-align:center; margin-bottom:1.5rem; }
.relatorio-header img { max-height:50px; margin-bottom:.5rem; }
.relatorio-header h2 { font-size:1.3rem; color:var(--gray-800); margin-bottom:.2rem; }
.relatorio-section { margin-bottom:1.25rem; }
.relatorio-section h3 { font-size:.9rem; color:var(--primary); border-bottom:2px solid var(--primary-light); padding-bottom:.3rem; margin-bottom:.75rem; }
.relatorio-grid { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; font-size:.85rem; }
.relatorio-grid .item { padding:.3rem 0; }
.relatorio-grid .item label { font-weight:600; color:var(--gray-600); font-size:.75rem; display:block; }
.relatorio-grid .item span { color:var(--gray-800); }
.relatorio-status { display:inline-block; padding:.3rem .8rem; border-radius:12px; font-weight:600; font-size:.8rem; color:#fff; margin:.5rem 0; }
.relatorio-fotos { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem; }
.relatorio-fotos img { width:120px; height:90px; object-fit:cover; border-radius:8px; }

/* INPUT FILE STYLING */
.input-file { padding:.4rem; font-size:.8rem; }

/* MOBILE ENHANCEMENTS - iOS & Android */
@media(max-width:768px) {
  .content { padding:1rem .75rem; }
  .page-actions { flex-wrap:wrap; }
  .page-actions .btn { flex:1; min-width:120px; justify-content:center; }
  .filters-bar { flex-direction:column; }
  .filter-input { width:100%; }
  .view-toggle-group { margin-left:0; width:100%; }
  .view-toggle-group .btn { flex:1; min-width:0; justify-content:center; padding:.5rem .3rem; font-size:.72rem; }
  .kanban-col { flex:0 0 85vw; max-height:calc(100vh - 320px); }
  .agenda-dia-cards { grid-template-columns:1fr !important; }
  .proposta-card { padding:1rem; }
  .proposta-grid { grid-template-columns:1fr; }
  .proposta-actions { flex-wrap:wrap; }
  .proposta-actions .btn { flex:1; min-width:80px; justify-content:center; font-size:.72rem; padding:.5rem .4rem; }
  .imovel-card--horizontal { flex-direction:column; }
  .imovel-card-media { width:100%; flex:none; aspect-ratio:16/10; min-height:0; }
  .imovel-card-media-empty { min-height:0; aspect-ratio:16/10; }
  .imovel-card-body { padding:1rem; }
  .imovel-card-footer { flex-direction:column; align-items:stretch; }
  .imovel-card .imovel-valor { font-size:1.05rem; }
  .imovel-card .imovel-actions { justify-content:flex-start; }
  .imovel-actions-social { padding-right:0; margin-right:0; border-right:none; padding-bottom:.35rem; border-bottom:1px solid var(--gray-100); width:100%; }
  .imovel-actions-tools { width:100%; }
  .btn-imovel { flex:1; min-width:calc(50% - .25rem); }
  .btn-imovel-instagram, .btn-imovel-facebook, .btn-imovel-ambos { flex:1; min-width:calc(33.33% - .3rem); }
  .btn-imovel span, .imovel-share-label { display:none; }
  .imovel-share-btn { padding:.45rem .55rem; border-radius:10px; }
  .cliente-card { padding:1rem; }
  .cliente-actions { flex-wrap:wrap; }
  .modal-box { padding:1.25rem; margin:.5rem; max-height:95vh; }
  .relatorio-grid { grid-template-columns:1fr; }
  .relatorio-fotos img { width:80px; height:60px; }
  .stat-card { padding:.75rem; }
  .stat-num { font-size:1.2rem; }
  .topbar { padding:.5rem .75rem; }
  .btn { padding:.5rem .8rem; font-size:.78rem; }
  .btn-lg { padding:.65rem 1rem; }
  .form-card { padding:1rem; }
  .grid-4 { grid-template-columns:1fr 1fr; }
  .field label { font-size:.68rem; }
  .field input, .field select, .field textarea { font-size:.85rem; padding:.5rem .6rem; }
  /* Touch targets */
  .nav-link { padding:.85rem 1.5rem; }
  .btn-icon { padding:.6rem; font-size:1.1rem; }
  /* Timeline box */
  #timeline-box { margin-top:1rem; }
  /* Spreadsheet */
  .spreadsheet-container { max-height:350px; }
  .spreadsheet-container th, .spreadsheet-container td { min-width:80px; }
}

@media(max-width:380px) {
  .grid-4 { grid-template-columns:1fr; }
  .grid-3 { grid-template-columns:1fr; }
  .proposta-actions .btn span { display:none; }
  .imovel-actions .btn { font-size:.7rem; }
}

/* iOS safe area */
@supports(padding-bottom: env(safe-area-inset-bottom)) {
  .sidebar-user { padding-bottom:calc(1rem + env(safe-area-inset-bottom)); }
  .app-footer { padding-bottom:calc(1rem + env(safe-area-inset-bottom)); }
}

/* Touch highlight */
.btn { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.nav-link { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }

/* Superadmin — abas Administração */
.admin-tabs { display:flex; gap:.5rem; margin-bottom:1.25rem; flex-wrap:wrap; }
.admin-tab { padding:.6rem 1.2rem; border:1px solid var(--gray-200); background:#fff; border-radius:10px; cursor:pointer; font-size:.85rem; font-weight:600; color:var(--gray-600); transition:all .15s; }
.admin-tab:hover { border-color:var(--primary); color:var(--primary); }
.admin-tab.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.admin-tab i { margin-right:.35rem; }
.admin-tenant-card, .admin-colab-card { padding:.85rem 1rem; border:1px solid var(--gray-200); border-radius:10px; margin-bottom:.75rem; background:#fff; }
.admin-tenant-card:hover, .admin-colab-card:hover { border-color:var(--gray-300); }
.admin-card-meta { font-size:.72rem; color:var(--gray-500); margin-top:.25rem; }
.admin-card-actions { display:flex; gap:.3rem; flex-wrap:wrap; margin-top:.5rem; }
.admin-badge { font-size:.65rem; padding:2px 7px; border-radius:4px; font-weight:700; margin-left:.3rem; }
.admin-badge-ativo { background:#dcfce7; color:#16a34a; }
.admin-badge-inativo { background:#fee2e2; color:#dc2626; }
.admin-badge-demo { background:#fef3c7; color:#b45309; }
.admin-badge-login { background:#dbeafe; color:#2563eb; }

/* Financeiro — discriminação de comissões */
.fin-lancamento { display:flex; justify-content:space-between; align-items:flex-start; padding:.75rem 0; border-bottom:1px solid var(--gray-200); font-size:.82rem; gap:.75rem; flex-wrap:wrap; }
.fin-lancamento-main { flex:1; min-width:220px; }
.fin-lancamento-meta { font-size:.72rem; color:var(--gray-400); margin-top:.25rem; }
.fin-detalhe { margin-top:.45rem; padding:.45rem .6rem; background:var(--gray-50); border-radius:8px; font-size:.74rem; }
.fin-detalhe-linha { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.15rem 0; color:var(--gray-600); }
.fin-detalhe-linha span:first-child { color:var(--gray-500); flex-shrink:0; }
.fin-detalhe-linha span:last-child { font-weight:600; color:var(--gray-800); text-align:right; }
.fin-detalhe-final { margin-top:.2rem; padding-top:.3rem; border-top:1px dashed var(--gray-200); }
.fin-detalhe-final span:last-child { color:var(--green); font-weight:700; }
.fin-comissoes-resumo { margin-top:-.5rem; }
.tutorial-box{margin-top:1rem;padding:1.25rem;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:12px}
.tutorial-box h4{margin-bottom:.75rem;font-size:.9rem;color:var(--primary)}
.tutorial-box ol{padding-left:1.25rem;font-size:.82rem;line-height:1.8}
.meta-oauth-status{font-size:.85rem;margin-top:.5rem;padding:.5rem .75rem;border-radius:8px}
.meta-oauth-status.loading{background:#eef2ff;color:#4338ca}
.meta-oauth-status.ok{background:#dcfce7;color:#15803d}
.meta-oauth-status.err{background:#fee2e2;color:#b91c1c}
.btn-wpp{background:#25d366!important;border-color:#25d366!important;color:#fff!important}

/* Tutorial / balão passo a passo por aba */
.tut-slot { margin-bottom:1rem; }
.tut-slot-bar { margin-bottom:.75rem; }
.tut-balao {
  background:linear-gradient(135deg,#eef2ff 0%,#f8fafc 55%,#fff 100%);
  border:1px solid #c7d2fe;
  border-left:4px solid var(--primary,#4f46e5);
  border-radius:14px;
  padding:0;
  box-shadow:0 8px 24px rgba(79,70,229,.08);
  margin-bottom:1rem;
  position:relative;
}
.tut-balao::before {
  content:'';
  position:absolute;
  left:18px;
  top:-8px;
  width:16px;height:16px;
  background:#eef2ff;
  border-left:1px solid #c7d2fe;
  border-top:1px solid #c7d2fe;
  transform:rotate(45deg);
}
.tut-balao > summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:.65rem;
  flex-wrap:wrap;
  padding:.85rem 1rem;
  font-weight:600;
  color:#312e81;
  user-select:none;
}
.tut-balao > summary::-webkit-details-marker { display:none; }
.tut-balao-icon {
  width:28px;height:28px;border-radius:50%;
  background:#4f46e5;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.85rem;flex-shrink:0;
}
.tut-balao-title { flex:1; min-width:160px; }
.tut-balao-hint {
  font-size:.68rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:#6366f1;background:#e0e7ff;padding:.2rem .5rem;border-radius:999px;
}
.tut-balao-body { padding:0 1rem 1rem; }
.tut-oque, .tut-paraque { font-size:.86rem; color:#475569; line-height:1.55; margin:.35rem 0; }
.tut-block { margin-top:.85rem; }
.tut-block h4 {
  font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;
  color:#4f46e5;margin:0 0 .45rem;font-weight:700;
}
.tut-funcs { margin:0; padding-left:1.1rem; }
.tut-funcs li { font-size:.84rem; color:#334155; margin:.3rem 0; line-height:1.45; }
.tut-passos {
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:.45rem;
}
.tut-passos li {
  display:flex; gap:.65rem; align-items:flex-start;
  font-size:.84rem; color:#1e293b; line-height:1.45;
  background:#fff; border:1px solid #e2e8f0; border-radius:10px;
  padding:.55rem .7rem;
}
.tut-step-num {
  flex-shrink:0; width:22px;height:22px;border-radius:50%;
  background:#4f46e5;color:#fff;font-size:.72rem;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:1px;
}
.tut-dica, .tut-aviso {
  margin-top:.75rem; font-size:.82rem; line-height:1.45;
  padding:.65rem .8rem; border-radius:10px;
}
.tut-dica { background:#ecfdf5; border:1px solid #6ee7b7; color:#065f46; }
.tut-aviso { background:#fffbeb; border:1px solid #fcd34d; color:#92400e; }
.tut-balao-body > .btn { margin-top:.75rem; }

/* Agendamentos (Leads → Agendamentos): sala / videoconferência, evolução, proposta */
.ag-acoes { flex-wrap:wrap; }
.ag-status { display:inline-block; font-size:.68rem; font-weight:700; padding:.15rem .5rem; border-radius:999px; background:var(--gray-100); color:var(--gray-600); text-transform:uppercase; letter-spacing:.02em; }
.ag-status.agendado, .ag-status.remarcado { background:#ede9fe; color:#6d28d9; }
.ag-status.realizado, .ag-status.em_negociacao { background:#e0f2fe; color:#0369a1; }
.ag-status.fechou, .ag-status.proposta { background:#dcfce7; color:#15803d; }
.ag-status.nao_compareceu { background:#fef3c7; color:#b45309; }
.ag-status.perdido, .ag-status.cancelado { background:#fee2e2; color:#b91c1c; }
.ag-modalidade { font-size:.8rem; color:var(--gray-700); margin-top:.3rem; display:flex; align-items:center; gap:.35rem; }
.ag-ultima-evo { font-size:.78rem; color:var(--gray-500); margin-top:.35rem; font-style:italic; }
.ag-hist-item { border-left:3px solid var(--gray-200); padding:.35rem .75rem; margin-bottom:.5rem; font-size:.82rem; }
.ag-hist-item small { color:var(--gray-400); }
.agenda-card.ag-encerrado { border-left-color:var(--gray-300); opacity:.85; }
.agenda-card.ag-acompanhamento { border-left-color:#0ea5e9; }
#form-agendamento .grid-4, #form-evolucao-agendamento .grid-2 { grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); }
#form-agendamento .grid-4 > .field, #form-evolucao-agendamento .grid-2 > .field { min-width:0; }
.ag-status { white-space:nowrap; }

/* Painel de acompanhamento dos agendamentos (gestão) */
.agp-kpis { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.6rem; margin:1rem 0; }
.agp-kpi { background:var(--gray-50); border:1px solid var(--gray-200); border-radius:10px; padding:.7rem .85rem; }
.agp-kpi-val { font-size:1.5rem; font-weight:800; line-height:1.1; }
.agp-kpi-rot { font-size:.75rem; color:var(--gray-600); margin-top:.2rem; font-weight:600; }
.agp-kpi-sub { font-size:.7rem; color:var(--gray-400); margin-top:.15rem; }
.agp-sub { font-size:.85rem; color:var(--gray-700); margin:1rem 0 .5rem; }
.agp-tabela-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.agp-tabela { width:100%; border-collapse:collapse; font-size:.8rem; }
.agp-tabela th { text-align:left; font-size:.7rem; text-transform:uppercase; color:var(--gray-500); padding:.45rem .5rem; border-bottom:2px solid var(--gray-100); white-space:nowrap; }
.agp-tabela td { padding:.5rem; border-bottom:1px solid var(--gray-100); vertical-align:top; }
.agp-tabela tbody tr:hover { background:var(--gray-50); }
.agp-tabela small { color:var(--gray-400); }
.agp-excluido td { opacity:.6; text-decoration:line-through; }
.agp-excluido td:last-child { opacity:1; text-decoration:none; }
.ag-status.excluido { background:#f3f4f6; color:#6b7280; }
.agenda-concluidos summary { list-style:revert; }

/* Responsável pelo atendimento + histórico da evolução */
.ag-responsavel { font-size:.75rem; color:var(--gray-600); margin-top:.4rem; }
.ag-hist-quem { font-size:.72rem; color:var(--gray-500); margin-top:.25rem; }
.ag-hist-resp { border-left-color:#f59e0b; }
.agp-hist-linha td { background:var(--gray-50); padding:.75rem 1rem; }