:root {
  --primary: #1f5fe0;
  --primary-dark: #123a9d;
  --navy: #0c1f48;
  --navy-2: #102a61;
  --bg: #f3f6fb;
  --surface: #ffffff;
  --text: #142033;
  --muted: #6d7b94;
  --line: #dfe6f1;
  --success: #1b9c64;
  --warning: #e89a16;
  --danger: #dc3f4f;
  --purple: #7d56d8;
  --cyan: #0f9fb4;
  --shadow: 0 14px 40px rgba(19, 42, 87, .08);
  --radius: 18px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: Arial, Helvetica, sans-serif; background: var(--bg); color: var(--text); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: var(--primary); }
.hidden { display: none !important; }
.login-screen { min-height: 100vh; padding: 32px; display: grid; place-items: center; background: radial-gradient(circle at top right, #dbe8ff 0, transparent 38%), linear-gradient(135deg, #eef4ff, #f8fbff 50%, #eaf0f8); }
.login-panel { width: min(1020px, 100%); background: var(--surface); border-radius: 28px; box-shadow: 0 28px 80px rgba(31, 73, 149, .18); padding: 42px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 34px; }
.login-brand { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; }
.login-brand strong, .sidebar-brand strong { display: block; font-size: 19px; }
.login-brand span, .sidebar-brand span { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.logo-mark { width: 60px; height: 60px; border-radius: 19px; display: grid; place-items: center; font-size: 28px; font-weight: 900; color: #fff; background: linear-gradient(145deg, #2b70ff, #173f9f); box-shadow: 0 12px 26px rgba(31, 95, 224, .3); }
.logo-mark.small { width: 42px; height: 42px; border-radius: 13px; font-size: 21px; }
.eyebrow { display: inline-flex; border-radius: 99px; padding: 7px 11px; background: #e9f0ff; color: var(--primary); font-weight: 800; font-size: 12px; letter-spacing: .08em; }
.login-copy h1 { font-size: clamp(32px, 4vw, 55px); line-height: 1.02; margin: 16px 0; letter-spacing: -.04em; }
.login-copy p { color: var(--muted); line-height: 1.65; font-size: 17px; }
.login-form { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 20px; background: #f7f9fd; border: 1px solid var(--line); }
.login-form label, .field label { font-weight: 700; font-size: 13px; }
input, select, textarea { width: 100%; border: 1px solid #ccd6e5; border-radius: 11px; background: #fff; color: var(--text); padding: 11px 12px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(31, 95, 224, .1); }
.demo-access { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.demo-access strong { margin-right: 8px; }
.demo-access button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 12px; color: var(--navy); }
.demo-access button:hover { border-color: var(--primary); color: var(--primary); }
.app { min-height: 100vh; display: flex; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 240px; background: linear-gradient(180deg, var(--navy), #091735); color: #fff; padding: 18px 14px; display: flex; flex-direction: column; z-index: 50; transition: transform .25s ease; overflow-y: auto; }
.sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 18px; }
.sidebar-brand span { color: #a8b8d7; }
.menu { display: grid; gap: 5px; }
.menu-item { border: 0; border-radius: 10px; background: transparent; color: #d7e1f6; text-align: left; padding: 11px 12px; font-weight: 700; }
.menu-item:hover, .menu-item.active { background: #22427e; color: #fff; }
.menu-item[disabled] { display: none; }
.sidebar-footer { margin-top: auto; border-top: 1px solid rgba(255,255,255,.12); padding: 14px 10px 4px; display: flex; justify-content: space-between; gap: 10px; color: #b8c5de; font-size: 13px; }
.link-button { border: 0; background: transparent; color: #fff; padding: 0; }
.main-content { margin-left: 240px; width: calc(100% - 240px); min-height: 100vh; padding: 24px; }
.topbar { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.topbar h2 { margin: 0; font-size: 30px; }
.topbar p { margin: 5px 0 0; color: var(--muted); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.icon-button { min-width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 11px; background: #fff; display: grid; place-items: center; }
#menu-toggle { display: none; }
.badge-button { position: relative; }
.badge-button span { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; border-radius: 99px; background: var(--danger); color: #fff; font-size: 11px; display: grid; place-items: center; }
.user-chip { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 7px 11px; }
.user-chip > span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #e7efff; color: var(--primary); font-weight: 900; }
.user-chip strong, .user-chip small { display: block; }
.user-chip small { color: var(--muted); margin-top: 2px; }
.notification-panel { position: fixed; top: 78px; right: 24px; width: min(390px, calc(100vw - 32px)); z-index: 90; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 15px; }
.notification-panel .panel-header { margin-bottom: 8px; }
.notification-item { padding: 11px 4px; border-bottom: 1px solid var(--line); display: flex; gap: 10px; }
.notification-item:last-child { border-bottom: 0; }
.notification-dot { width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--warning); flex: 0 0 auto; }
.view { display: none; }
.view.active-view { display: block; animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity: .3; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 15px; }
.toolbar h3, .toolbar p { margin: 0; }
.toolbar p { color: var(--muted); margin-top: 4px; }
.toolbar .grow { flex: 1 1 280px; }
.filters-toolbar select { flex: 1 1 160px; }
.btn { border: 0; border-radius: 11px; padding: 11px 15px; font-weight: 800; transition: transform .15s ease, opacity .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-secondary { background: #e8eef8; color: #25436e; }
.btn-whatsapp { background: #19a962; color: #fff; }
.btn-danger { background: #ffe8eb; color: var(--danger); }
.btn-full { width: 100%; }
.stats-grid { display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)); gap: 13px; margin-bottom: 17px; }
.stats-grid.compact { grid-template-columns: repeat(4, minmax(160px, 1fr)); }
.stat-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: 0 7px 24px rgba(31, 58, 105, .04); min-width: 0; }
.stat-card span { color: var(--muted); font-size: 12px; font-weight: 700; }
.stat-card strong { display: block; font-size: 25px; margin: 8px 0 4px; }
.stat-card small { color: var(--muted); }
.stat-card.positive strong { color: var(--success); }
.stat-card.warning strong { color: var(--warning); }
.stat-card.money strong { color: var(--primary); }
.dashboard-grid { display: grid; gap: 16px; margin-bottom: 16px; }
.dashboard-grid.funnel-dashboard { grid-template-columns: minmax(0, 1.6fr) minmax(300px, .8fr); }
.dashboard-grid.thirds { grid-template-columns: 1.1fr .9fr .8fr; }
.dashboard-grid.halves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: 0 8px 30px rgba(31, 58, 105, .04); min-width: 0; }
.panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.panel-header h3, .panel-header p { margin: 0; }
.panel-header p { color: var(--muted); margin-top: 4px; font-size: 13px; }
.status-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 6px 9px; background: #e8f6ef; color: var(--success); font-size: 11px; font-weight: 800; white-space: nowrap; }
.status-pill.warning { background: #fff3dc; color: #a36200; }
.status-pill.danger { background: #ffe6e9; color: var(--danger); }
.funnel-chart { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 5px 0 2px; }
.funnel-level { min-height: 42px; color: #fff; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 8px 16px; border-radius: 8px; font-weight: 800; cursor: pointer; transition: transform .15s ease; }
.funnel-level:hover { transform: scale(1.015); }
.funnel-level small { font-weight: 600; opacity: .9; }
.alert-list, .timeline, .finance-list { display: grid; gap: 9px; }
.alert-item, .timeline-item, .finance-item { border: 1px solid var(--line); border-radius: 13px; padding: 11px; display: flex; align-items: flex-start; gap: 10px; }
.alert-icon { width: 31px; height: 31px; border-radius: 9px; display: grid; place-items: center; background: #fff2d9; flex: 0 0 auto; }
.alert-item strong, .alert-item small, .timeline-item strong, .timeline-item small { display: block; }
.alert-item small, .timeline-item small { color: var(--muted); margin-top: 3px; }
.bar-chart { min-height: 230px; display: flex; align-items: flex-end; gap: 11px; padding: 15px 3px 0; }
.bar-column { flex: 1; min-width: 0; text-align: center; }
.bar-pair { height: 170px; display: flex; justify-content: center; align-items: flex-end; gap: 3px; }
.bar { width: 42%; border-radius: 7px 7px 2px 2px; background: var(--primary); min-height: 4px; }
.bar.secondary { background: #8fb1ff; }
.bar-column span { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; }
.ranking-list { display: grid; gap: 9px; }
.ranking-item { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 9px; border-radius: 12px; background: #f8faff; }
.ranking-position { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; background: #e4ecff; color: var(--primary); }
.ranking-item small { display: block; color: var(--muted); margin-top: 2px; }
.donut-wrap { min-height: 230px; display: grid; place-items: center; }
.donut { width: 165px; height: 165px; border-radius: 50%; position: relative; display: grid; place-items: center; }
.donut::after { content: ''; width: 105px; height: 105px; border-radius: 50%; background: #fff; position: absolute; }
.donut-label { position: relative; z-index: 1; text-align: center; }
.donut-label strong, .donut-label small { display: block; }
.donut-label strong { font-size: 22px; }
.donut-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.donut-legend span { font-size: 11px; color: var(--muted); }
.horizontal-bars { display: grid; gap: 11px; }
.hbar-row { display: grid; grid-template-columns: minmax(100px, 150px) 1fr 44px; gap: 9px; align-items: center; }
.hbar-track { height: 11px; border-radius: 99px; background: #eaf0f7; overflow: hidden; }
.hbar-fill { height: 100%; background: var(--primary); border-radius: inherit; }
.bulk-summary { margin-bottom: 9px; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.table-card { width: 100%; overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.data-table { width: 100%; border-collapse: collapse; min-width: 900px; }
.data-table th, .data-table td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.data-table th { color: var(--muted); font-size: 12px; background: #f8faff; position: sticky; top: 0; z-index: 2; }
.data-table tbody tr:hover { background: #fbfcff; }
.data-table small { display: block; color: var(--muted); margin-top: 3px; }
.table-actions { display: flex; gap: 5px; }
.table-actions button { border: 0; background: #edf2fb; color: #274879; border-radius: 8px; padding: 7px 9px; font-weight: 700; }
.stage-badge, .role-badge, .finance-status { display: inline-flex; border-radius: 999px; padding: 5px 8px; font-weight: 800; font-size: 11px; background: #e8efff; color: var(--primary); }
.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
.kanban-column { width: 275px; flex: 0 0 275px; border-radius: 16px; background: #e9eef7; padding: 10px; min-height: 260px; }
.kanban-header { display: flex; justify-content: space-between; align-items: center; padding: 4px 2px 10px; }
.kanban-header h4 { margin: 0; font-size: 13px; }
.kanban-header span { min-width: 24px; height: 24px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 900; }
.kanban-body { display: grid; gap: 8px; min-height: 180px; }
.kanban-card { border-radius: 13px; background: #fff; border: 1px solid var(--line); padding: 11px; box-shadow: 0 6px 15px rgba(32, 55, 95, .05); cursor: grab; }
.kanban-card:active { cursor: grabbing; }
.kanban-card strong, .kanban-card small { display: block; }
.kanban-card small { color: var(--muted); margin-top: 4px; }
.kanban-card .card-meta { display: flex; justify-content: space-between; margin-top: 9px; font-size: 11px; color: var(--muted); }
.calendar-layout { display: grid; grid-template-columns: 1.3fr .7fr; gap: 16px; }
.calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.calendar-header button { border: 1px solid var(--line); background: #fff; border-radius: 8px; width: 34px; height: 34px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(48px, 1fr)); gap: 6px; }
.calendar-day { min-height: 82px; border: 1px solid var(--line); border-radius: 10px; padding: 7px; background: #fff; }
.calendar-day.muted { opacity: .45; }
.calendar-day strong { font-size: 12px; }
.calendar-event { display: block; margin-top: 5px; border-radius: 6px; padding: 4px; background: #e8efff; color: var(--primary-dark); font-size: 9px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(250px, 1fr)); gap: 14px; }
.info-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.info-card .card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.info-card h4, .info-card p { margin: 0; }
.info-card p { color: var(--muted); margin-top: 5px; }
.info-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 14px; }
.info-list div { background: #f7f9fd; border-radius: 10px; padding: 9px; }
.info-list span, .info-list strong { display: block; }
.info-list span { color: var(--muted); font-size: 11px; margin-bottom: 3px; }
.progress { height: 9px; background: #e7edf6; border-radius: 99px; overflow: hidden; margin-top: 12px; }
.progress span { display: block; height: 100%; background: var(--success); border-radius: inherit; }
.checklist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin-top: 12px; }
.checklist label, .check { display: flex; gap: 7px; align-items: center; font-size: 12px; }
.property-grid { display: grid; grid-template-columns: repeat(3, minmax(250px, 1fr)); gap: 14px; }
.property-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.property-image { height: 160px; background: linear-gradient(135deg, #dce7f8, #edf3fc); display: grid; place-items: center; color: var(--muted); font-weight: 800; position: relative; }
.property-image img { width: 100%; height: 100%; object-fit: cover; }
.property-image .property-status { position: absolute; top: 10px; left: 10px; }
.property-body { padding: 15px; }
.property-body h4, .property-body p { margin: 0; }
.property-body p { color: var(--muted); margin-top: 5px; }
.property-price { color: var(--primary); font-size: 20px; font-weight: 900; margin-top: 11px; }
.property-meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); margin-top: 11px; font-size: 12px; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; }
.tab { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 9px 13px; font-weight: 800; color: #435a7d; }
.tab.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.tab-content { display: none; }
.tab-content.active { display: block; }
.calculator-layout { display: grid; grid-template-columns: minmax(320px, .9fr) minmax(320px, 1.1fr); gap: 16px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.field { min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field small { display: block; color: var(--muted); margin-top: 5px; }
.calculation-summary { display: grid; gap: 9px; }
.calculation-line { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 10px; border-radius: 11px; background: #f7f9fd; }
.calculation-line.total { background: #e8efff; color: var(--primary-dark); font-weight: 900; }
.validation-box { margin-top: 12px; border-radius: 12px; padding: 11px; font-weight: 800; }
.validation-box.ok { background: #e5f7ee; color: #0f7548; }
.validation-box.error { background: #ffe6e9; color: #a72435; }
.finance-item { justify-content: space-between; align-items: center; }
.finance-item strong, .finance-item small { display: block; }
.finance-item small { color: var(--muted); margin-top: 3px; }
.whatsapp-grid, .settings-grid, .import-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.full-panel { grid-column: 1 / -1; }
.notice { border-radius: 12px; padding: 12px; background: #edf4ff; color: #2a4d81; margin-top: 12px; line-height: 1.5; }
.warning-notice { background: #fff4df; color: #895400; }
.selection-list { max-height: 510px; overflow: auto; display: grid; gap: 7px; }
.selection-item { display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 11px; }
.selection-item small { display: block; color: var(--muted); margin-top: 3px; }
.campaign-list { display: grid; gap: 10px; }
.campaign-card { display: grid; grid-template-columns: 1fr repeat(4, auto); align-items: center; gap: 13px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; }
.campaign-card small { display: block; color: var(--muted); margin-top: 3px; }
.drop-zone { border: 2px dashed #b8c7de; border-radius: 15px; min-height: 155px; display: grid; place-items: center; text-align: center; background: #f9fbff; margin-bottom: 12px; }
.drop-zone strong, .drop-zone span { display: block; }
.drop-zone span { color: var(--muted); margin-top: 6px; }
.drop-zone input { display: none; }
.mapping-grid { display: grid; gap: 9px; }
.mapping-row { display: grid; grid-template-columns: 1fr 32px 1fr; gap: 8px; align-items: center; }
.mapping-row span { text-align: center; color: var(--muted); }
.invalid-cell { background: #ffe8eb !important; color: #9f2435; }
.aux-grid { display: grid; grid-template-columns: repeat(4, minmax(190px, 1fr)); gap: 14px; }
.aux-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 15px; }
.aux-card h4, .aux-card p { margin: 0; }
.aux-card p { color: var(--muted); margin: 5px 0 13px; }
.aux-card button { width: 100%; border: 1px solid var(--line); background: #f7f9fd; border-radius: 9px; padding: 9px; font-weight: 800; color: #34537c; }
.permission-matrix { overflow: auto; }
.permission-table-inner { min-width: 1000px; display: grid; }
.permission-row { display: grid; grid-template-columns: 200px repeat(6, 130px); align-items: center; border-bottom: 1px solid var(--line); }
.permission-row > * { padding: 10px; text-align: center; }
.permission-row > :first-child { text-align: left; }
.permission-row.header { background: #f7f9fd; font-size: 12px; color: var(--muted); font-weight: 800; position: sticky; top: 0; }
.setting-list { display: grid; gap: 11px; }
.setting-list label { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 11px; }
.setting-list select { width: auto; min-width: 130px; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(5, 18, 42, .55); z-index: 100; }
.modal { position: fixed; z-index: 110; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(900px, calc(100vw - 28px)); max-height: calc(100vh - 30px); overflow: auto; background: #fff; border-radius: 20px; box-shadow: 0 28px 90px rgba(7, 26, 63, .3); }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; z-index: 3; }
.modal-header h3 { margin: 0; }
.modal-content { padding: 18px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 9px; margin-top: 16px; }
.form-section { border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 13px; }
.form-section h4 { margin: 0 0 12px; }
.toast-container { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: grid; gap: 8px; }
.toast { min-width: 260px; max-width: 380px; background: #142b58; color: #fff; border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow); animation: toastIn .2s ease; }
.toast.success { background: #137349; }
.toast.error { background: #a62c3b; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 1250px) {
  .stats-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
  .dashboard-grid.thirds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid.thirds > :last-child { grid-column: 1 / -1; }
  .card-grid, .property-grid { grid-template-columns: repeat(2, minmax(250px, 1fr)); }
  .aux-grid { grid-template-columns: repeat(3, minmax(190px, 1fr)); }
}
@media (max-width: 980px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; width: 100%; padding: 18px; }
  #menu-toggle { display: grid; }
  .dashboard-grid.funnel-dashboard, .dashboard-grid.thirds, .dashboard-grid.halves, .calendar-layout, .calculator-layout, .whatsapp-grid, .settings-grid, .import-layout { grid-template-columns: 1fr; }
  .full-panel { grid-column: auto; }
  .stats-grid, .stats-grid.compact { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
  .login-panel { grid-template-columns: 1fr; }
  .login-brand, .demo-access { grid-column: auto; }
}
@media (max-width: 700px) {
  .login-screen { padding: 12px; }
  .login-panel { padding: 22px; border-radius: 20px; }
  .main-content { padding: 12px; }
  .topbar h2 { font-size: 23px; }
  .user-chip div { display: none; }
  .toolbar > select, .toolbar > .btn { flex: 1 1 100%; }
  .stats-grid, .stats-grid.compact, .card-grid, .property-grid, .aux-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .calendar-grid { gap: 3px; }
  .calendar-day { min-height: 62px; padding: 4px; }
  .campaign-card { grid-template-columns: 1fr 1fr; }
  .campaign-card > :first-child { grid-column: 1 / -1; }
  .responsive-table { min-width: 0; }
  .responsive-table thead { display: none; }
  .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td { display: block; width: 100%; }
  .responsive-table tr { padding: 11px; border-bottom: 1px solid var(--line); }
  .responsive-table td { border: 0; padding: 6px 3px; display: grid; grid-template-columns: 115px 1fr; gap: 8px; }
  .responsive-table td::before { content: attr(data-label); color: var(--muted); font-size: 11px; font-weight: 800; }
  .responsive-table td:first-child { display: block; }
  .responsive-table td:first-child::before { display: none; }
}

/* ===== Upgrade visual v2 ===== */
:root {
  --surface-2: #f7faff;
  --line-soft: rgba(169, 186, 214, .35);
  --gradient-primary: linear-gradient(135deg, #2b74ff 0%, #5a8dff 48%, #123ea5 100%);
  --gradient-dark: linear-gradient(180deg, #081833 0%, #0b1f47 45%, #08152c 100%);
  --shadow-soft: 0 20px 45px rgba(18, 41, 86, .08);
  --shadow-card: 0 18px 32px rgba(18, 41, 86, .08);
}
html, body {
  font-family: Inter, Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at 10% 5%, rgba(63, 125, 255, .08), transparent 24%),
    radial-gradient(circle at 95% 0%, rgba(125, 86, 216, .08), transparent 20%),
    linear-gradient(180deg, #f4f7fb 0%, #eef3f9 100%);
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: .18;
}
.login-screen {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 20%, rgba(43, 116, 255, .18), transparent 28%),
    radial-gradient(circle at 90% 10%, rgba(125, 86, 216, .17), transparent 25%),
    radial-gradient(circle at 85% 80%, rgba(15, 159, 180, .12), transparent 18%),
    linear-gradient(135deg, #edf3ff 0%, #f7faff 46%, #edf2f9 100%);
}
.login-screen::before,
.login-screen::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
  opacity: .55;
}
.login-screen::before {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(53, 117, 255, .22), transparent 70%);
  top: 7%;
  left: -2%;
  animation: floatBlob 9s ease-in-out infinite;
}
.login-screen::after {
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(125, 86, 216, .2), transparent 70%);
  right: 4%;
  bottom: 8%;
  animation: floatBlob 11s ease-in-out infinite reverse;
}
@keyframes floatBlob {
  0%,100% { transform: translateY(0) translateX(0) scale(1); }
  50% { transform: translateY(-12px) translateX(10px) scale(1.04); }
}
.login-panel {
  position: relative;
  z-index: 1;
  backdrop-filter: blur(18px);
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 30px 100px rgba(31, 73, 149, .16);
}
.login-brand {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.logo-mark {
  background: var(--gradient-primary);
  position: relative;
  overflow: hidden;
}
.logo-mark::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 45%, transparent 65%);
  transform: translateX(-120%);
  animation: shine 4.5s ease-in-out infinite;
}
@keyframes shine {
  0%, 70%, 100% { transform: translateX(-120%); }
  82% { transform: translateX(120%); }
}
.login-copy h1 {
  max-width: 14ch;
}
.login-form {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 12px 28px rgba(18, 41, 86, .06);
}
input, select, textarea {
  border-color: #d7e1ef;
  background: rgba(255,255,255,.92);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
input:hover, select:hover, textarea:hover {
  border-color: #b8c8df;
}
input:focus, select:focus, textarea:focus {
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px rgba(31, 95, 224, .11);
}
.btn {
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(19, 42, 87, .08);
}
.btn-primary {
  background: var(--gradient-primary);
}
.btn-secondary {
  background: linear-gradient(135deg, #eef4ff, #dce8ff);
}
.btn-whatsapp {
  background: linear-gradient(135deg, #1ebf66, #139a4f);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(19, 42, 87, .12);
}
.demo-access {
  gap: 10px;
}
.demo-access button {
  background: #f9fbff;
  transition: all .18s ease;
  box-shadow: 0 6px 12px rgba(18, 41, 86, .04);
}
.demo-access button:hover {
  transform: translateY(-1px);
  background: #fff;
}
.sidebar {
  width: 260px;
  background: var(--gradient-dark);
  border-right: 1px solid rgba(255,255,255,.08);
  box-shadow: 16px 0 34px rgba(6, 16, 41, .16);
}
.sidebar::before {
  content: '';
  position: absolute;
  top: -140px;
  right: -70px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91, 143, 255, .18), transparent 70%);
}
.sidebar::after {
  content: '';
  position: absolute;
  inset: auto auto 70px -80px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(125, 86, 216, .18), transparent 70%);
}
.sidebar-brand,
.menu,
.sidebar-footer {
  position: relative;
  z-index: 1;
}
.menu {
  gap: 7px;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 700;
  transition: all .18s ease;
}
.menu-item::before {
  width: 18px;
  display: inline-grid;
  place-items: center;
  opacity: .9;
}
.menu-item[data-view="dashboard"]::before { content: '◫'; }
.menu-item[data-view="leads"]::before { content: '◎'; }
.menu-item[data-view="funil"]::before { content: '▽'; }
.menu-item[data-view="visitas"]::before { content: '◷'; }
.menu-item[data-view="simulacoes"]::before { content: '∑'; }
.menu-item[data-view="documentos"]::before { content: '☰'; }
.menu-item[data-view="empreendimentos"]::before { content: '⌂'; }
.menu-item[data-view="imoveis"]::before { content: '▣'; }
.menu-item[data-view="vendas"]::before { content: '◈'; }
.menu-item[data-view="comissoes"]::before { content: '$'; }
.menu-item[data-view="financeiro"]::before { content: '↗'; }
.menu-item[data-view="relatorios"]::before { content: '▤'; }
.menu-item[data-view="whatsapp"]::before { content: '◉'; }
.menu-item[data-view="importacao"]::before { content: '⇅'; }
.menu-item[data-view="cadastros"]::before { content: '⚙'; }
.menu-item[data-view="usuarios"]::before { content: '◌'; }
.menu-item[data-view="configuracoes"]::before { content: '✦'; }
.menu-item:hover,
.menu-item.active {
  border-color: rgba(120, 156, 255, .18);
  background: linear-gradient(135deg, rgba(45, 89, 183, .78), rgba(23, 53, 118, .95));
  transform: translateX(2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(4, 14, 35, .18);
}
.main-content {
  margin-left: 260px;
  width: calc(100% - 260px);
  padding: 22px;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 25;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 20px;
  backdrop-filter: blur(16px);
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow-soft);
}
.topbar h2 {
  letter-spacing: -.03em;
}
.icon-button,
.user-chip {
  box-shadow: 0 10px 25px rgba(18, 41, 86, .07);
}
.icon-button {
  border-radius: 14px;
  background: rgba(255,255,255,.82);
}
.user-chip {
  padding: 8px 12px;
  background: rgba(255,255,255,.82);
}
.notification-panel {
  backdrop-filter: blur(16px);
  background: rgba(255,255,255,.95);
}
.view.active-view {
  animation: fadeRise .28s ease;
}
@keyframes fadeRise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.toolbar {
  margin-bottom: 16px;
}
.toolbar > input,
.toolbar > select {
  box-shadow: 0 8px 20px rgba(18, 41, 86, .04);
}
.stats-grid {
  gap: 14px;
}
.stat-card,
.panel,
.info-card,
.property-card,
.aux-card,
.table-card {
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.88);
  box-shadow: var(--shadow-card);
}
.stat-card,
.panel,
.info-card,
.property-card,
.aux-card,
.kanban-card,
.selection-item,
.campaign-card,
.alert-item,
.timeline-item,
.finance-item {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.stat-card:hover,
.panel:hover,
.info-card:hover,
.property-card:hover,
.aux-card:hover,
.kanban-card:hover,
.selection-item:hover,
.campaign-card:hover,
.alert-item:hover,
.timeline-item:hover,
.finance-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 38px rgba(18, 41, 86, .1);
}
.stat-card {
  position: relative;
  overflow: hidden;
  padding: 17px 16px;
}
.stat-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #2b74ff, #8a74ff);
}
.stat-card::after {
  content: '';
  position: absolute;
  right: -20px;
  top: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(43,116,255,.12), transparent 70%);
}
.stat-card span {
  letter-spacing: .02em;
}
.stat-card strong {
  font-size: 27px;
  letter-spacing: -.03em;
}
.panel {
  border-radius: 22px;
}
.status-pill {
  padding: 7px 11px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.03);
}
.funnel-chart {
  gap: 10px;
  padding: 10px 0 2px;
}
.funnel-level {
  min-height: 50px;
  border-radius: 16px;
  box-shadow: 0 12px 22px rgba(18, 41, 86, .11);
}
.funnel-level span,
.funnel-level strong {
  white-space: nowrap;
}
.alert-icon {
  border-radius: 11px;
}
.bar-chart {
  min-height: 250px;
}
.bar {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.horizontal-bar {
  border-radius: 999px;
  overflow: hidden;
}
.table-card {
  overflow: hidden;
  border-radius: 20px;
}
.data-table thead th {
  background: linear-gradient(180deg, #f7faff, #eef3fb);
  color: #486180;
  position: sticky;
  top: 0;
  z-index: 1;
}
.data-table tbody tr:nth-child(even) {
  background: rgba(247, 250, 255, .72);
}
.data-table tbody tr:hover {
  background: rgba(232, 239, 255, .88);
}
.bulk-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 8px 20px rgba(18, 41, 86, .05);
}
.kanban {
  gap: 14px;
  padding-bottom: 12px;
}
.kanban-column {
  background: linear-gradient(180deg, rgba(237,243,253,.92), rgba(228,236,248,.95));
  border: 1px solid rgba(255,255,255,.95);
  border-radius: 20px;
  box-shadow: 0 16px 28px rgba(18, 41, 86, .08);
}
.kanban-card {
  border-radius: 16px;
  box-shadow: 0 10px 22px rgba(18, 41, 86, .08);
}
.calendar-panel,
.calendar-day,
.info-card,
.property-card,
.selection-item,
.campaign-card,
.aux-card,
.form-section,
.modal {
  box-shadow: var(--shadow-card);
}
.calendar-day {
  border-color: #e4ebf5;
  background: rgba(255,255,255,.9);
}
.info-card,
.property-card,
.aux-card,
.form-section,
.modal {
  border-color: rgba(255,255,255,.94);
}
.property-card {
  border-radius: 20px;
}
.property-image {
  height: 170px;
  background: linear-gradient(135deg, #dce7f8, #edf3fc);
}
.property-image::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 70px;
  background: linear-gradient(180deg, transparent, rgba(8, 24, 51, .18));
  pointer-events: none;
}
.property-status {
  box-shadow: 0 8px 16px rgba(8, 24, 51, .12);
}
.tabs {
  gap: 10px;
}
.tab {
  border-radius: 12px;
  transition: all .18s ease;
}
.tab:hover {
  transform: translateY(-1px);
  border-color: #c8d6eb;
}
.calculation-line,
.notice,
.validation-box,
.selection-item,
.campaign-card,
.drop-zone {
  border-radius: 16px;
}
.notice,
.drop-zone {
  border: 1px solid rgba(255,255,255,.9);
}
.permission-row.header {
  background: linear-gradient(180deg, #f7faff, #eef3fb);
}
.permission-row:nth-child(even):not(.header) {
  background: rgba(247, 250, 255, .7);
}
.modal {
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.9);
}
.modal-header {
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,.92);
}
.toast {
  border-radius: 14px;
}
@media (max-width: 980px) {
  .sidebar { width: 250px; }
  .main-content { margin-left: 0; width: 100%; padding: 16px; }
  .topbar { border-radius: 18px; padding: 12px 14px; }
}
@media (max-width: 700px) {
  body::before { opacity: .1; }
  .topbar { gap: 12px; }
  .topbar-actions { gap: 8px; }
  .user-chip { padding: 7px 8px; }
  .stats-grid, .stats-grid.compact { gap: 10px; }
  .stat-card strong { font-size: 24px; }
  .bulk-summary { flex-direction: column; align-items: flex-start; }
  .kanban-column { width: 84vw; flex-basis: 84vw; }
}

/* ===== Ajustes PR7 solicitados ===== */
.horizontal-scroll {
  overflow-x: scroll;
  overflow-y: hidden;
  scrollbar-gutter: stable;
  padding-bottom: 5px;
}
.horizontal-scroll .data-table,
#broker-commission-report .data-table,
#commission-rules-table .data-table,
#import-preview .data-table {
  min-width: 1180px;
}
.horizontal-scroll::-webkit-scrollbar,
.table-card::-webkit-scrollbar {
  height: 12px;
}
.horizontal-scroll::-webkit-scrollbar-track,
.table-card::-webkit-scrollbar-track {
  background: #e8eef7;
  border-radius: 999px;
}
.horizontal-scroll::-webkit-scrollbar-thumb,
.table-card::-webkit-scrollbar-thumb {
  background: #9eb1cf;
  border: 3px solid #e8eef7;
  border-radius: 999px;
}
.commission-rules-help,
.report-help {
  margin: 0 0 14px;
}
.overdue-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  padding: 5px 8px;
  border-radius: 999px;
  background: #ffe7ea;
  color: #b62538;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
  animation: overduePulse 1.8s ease-in-out infinite;
}
.overdue-text {
  color: #b62538;
  font-weight: 900;
}
@keyframes overduePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(182,37,56,.08); }
  50% { box-shadow: 0 0 0 5px rgba(182,37,56,.08); }
}
.import-assignment-panel {
  border-top: 4px solid var(--primary);
}
.broker-check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 9px;
  padding: 10px;
  border-radius: 14px;
  background: #f7f9fd;
  border: 1px solid var(--line);
}
.broker-choice {
  padding: 9px 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line);
}
.import-preview-table td:last-child,
.import-preview-table th:last-child {
  position: sticky;
  right: 0;
  background: #fff9e9;
  box-shadow: -7px 0 13px rgba(20,32,51,.05);
}
@media (max-width: 700px) {
  .broker-check-grid { grid-template-columns: 1fr; }
  .horizontal-scroll { overflow-x: auto; }
}

/* V4 - funil oficial PR7 com 18 etapas */
.funnel-chart { gap: 6px; }
.funnel-level { min-height: 42px; padding: 7px 15px; border-radius: 13px; }
.funnel-level span { overflow: hidden; text-overflow: ellipsis; }
.funnel-level small { font-size: 10px; }
@media (max-width: 700px) {
  .funnel-level { min-height: 46px; width: 100% !important; }
  .funnel-level span { white-space: normal; line-height: 1.2; }
}

/* ===== V5: elevador visível para tabelas largas ===== */
.commission-report-scroll {
  overflow-x: auto !important;
  overflow-y: auto !important;
  max-height: 440px;
  scrollbar-gutter: stable both-edges;
  overscroll-behavior: contain;
}
.commission-report-scroll .data-table {
  min-width: 1450px !important;
}
.table-elevator {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 46px minmax(180px, 1fr) 46px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 15px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  box-shadow: 0 10px 24px rgba(18,41,86,.07);
  position: sticky;
  bottom: 8px;
  z-index: 8;
}
.table-elevator-btn {
  width: 46px;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #244f9d, #17376f);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(18,41,86,.16);
  transition: transform .15s ease, box-shadow .15s ease;
}
.table-elevator-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(18,41,86,.2);
}
.table-elevator-track {
  min-width: 0;
}
.table-elevator-label {
  display: block;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  letter-spacing: .02em;
}
.table-elevator-range {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #d9e4f5, #edf2f9);
  box-shadow: inset 0 1px 3px rgba(17,40,84,.12);
  cursor: ew-resize;
}
.table-elevator-range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 52px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2b70ff, #173f9f);
  box-shadow: 0 5px 12px rgba(31,95,224,.3);
  border: 3px solid #fff;
}
.table-elevator-range::-moz-range-thumb {
  width: 52px;
  height: 18px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: linear-gradient(135deg, #2b70ff, #173f9f);
  box-shadow: 0 5px 12px rgba(31,95,224,.3);
}
@media (max-width: 700px) {
  .table-elevator {
    grid-template-columns: 40px minmax(120px,1fr) 40px;
    gap: 7px;
    padding: 8px;
  }
  .table-elevator-btn { width: 40px; height: 38px; }
  .table-elevator-label { font-size: 9px; }
}


/* Revisão cliente v8 */
.status-pill.neutral-pill { background:#eef1f5; color:#596579; }
.status-pill.award-pill { background:#fff4d8; color:#8d5a00; border:1px solid #efd28d; }
.neutral-line { background:#f4f6f9; color:#5f697a; }
.stat-card.payable-highlight,
.stat-card.danger-money {
  background: linear-gradient(135deg,#8f1f2d,#c33a47);
  border-color:#8f1f2d;
}
.stat-card.payable-highlight span,
.stat-card.payable-highlight strong,
.stat-card.danger-money span,
.stat-card.danger-money strong { color:#fff !important; }
.stat-card.pr7-highlight {
  background: linear-gradient(135deg,#0a0a0a,#242424);
  border-color:#0a0a0a;
}
.stat-card.pr7-highlight span,
.stat-card.pr7-highlight strong { color:#fff !important; }
.stat-card.received-highlight {
  background: linear-gradient(135deg,#e9f8f1,#f5fffa);
  border-color:#bfe9d3;
}
.stat-card.warning-money {
  background: linear-gradient(135deg,#fff6df,#fffaf0);
  border-color:#efd99d;
}
.stat-card.projection-highlight {
  background: linear-gradient(135deg,#eef3fb,#f8fbff);
  border-color:#d7e2f2;
}
.payable-panel { border-top:4px solid #b72938; }
.payable-row { border-left:4px solid #b72938; background:#fff8f8; }
.finance-help { line-height:1.7; }
.aux-help { margin-bottom:16px; }
.aux-description { min-height:58px; line-height:1.45; font-size:12px; color:var(--muted); }
.aux-count { margin-bottom:8px !important; font-weight:800; color:#3a5278 !important; }
.modal-explanation { color:var(--muted); line-height:1.65; margin:0; }
#import-type { margin-bottom:12px; }

/* ===== V9 revisão geral ===== */
.restricted-panel {
  min-height: 180px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  border: 1px dashed #c8d5e8;
  border-radius: 18px;
  background: linear-gradient(135deg,#f8fbff,#eef3fb);
  color: var(--muted);
}
.calculation-line small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 10px;
  margin-top: -3px;
}
.report-help, .commission-rules-help { line-height: 1.65; }
.aux-card button { transition: transform .16s ease, background .16s ease; }
.aux-card button:hover { transform: translateY(-1px); background:#edf3ff; }
.sidebar { overflow-x: hidden; }
.config-actions { display:flex; gap:10px; flex-wrap:wrap; }
.config-actions .btn { flex:1 1 180px; }
.calendar-event { border:0; text-align:left; width:100%; cursor:pointer; }
.btn-small { padding:7px 10px; font-size:11px; white-space:nowrap; }
.grow { flex:1 1 auto; min-width:0; }
.login-help-button { border:0; background:transparent; color:var(--primary); font-weight:800; padding:6px; }
.login-help-button:hover { text-decoration:underline; }


/* V10 - WhatsApp por corretor */
.wa-connection-panel { position: relative; overflow: hidden; }
.wa-connection-panel::after { content:''; position:absolute; width:210px; height:210px; border-radius:50%; right:-80px; top:-90px; background:radial-gradient(circle, rgba(25,169,98,.14), transparent 70%); pointer-events:none; }
.wa-connection-layout { display:grid; grid-template-columns:minmax(240px,.8fr) minmax(300px,1.2fr) auto; gap:16px; align-items:stretch; position:relative; z-index:1; }
.wa-phone-card { display:flex; align-items:center; gap:14px; padding:16px; border-radius:16px; background:linear-gradient(135deg,#effbf4,#f8fffb); border:1px solid #d7efe1; }
.wa-phone-icon { width:48px; height:48px; border-radius:15px; display:grid; place-items:center; background:linear-gradient(135deg,#1ebf66,#11934b); color:#fff; font-size:22px; box-shadow:0 12px 22px rgba(25,169,98,.18); }
.wa-phone-card small,.wa-phone-card strong,.wa-phone-card span { display:block; }
.wa-phone-card small,.wa-phone-card span { color:var(--muted); font-size:11px; }
.wa-phone-card strong { margin:4px 0; font-size:18px; }
.wa-connection-data { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.wa-connection-data > div { padding:14px; border-radius:14px; background:#f7f9fd; border:1px solid var(--line); }
.wa-connection-data small,.wa-connection-data strong { display:block; }
.wa-connection-data small { color:var(--muted); margin-bottom:5px; }
.wa-connection-data strong { font-size:12px; word-break:break-word; }
.wa-connection-actions { display:flex; flex-direction:column; gap:8px; min-width:205px; }
.wa-team-grid { display:grid; grid-template-columns:repeat(3,minmax(220px,1fr)); gap:10px; }
.wa-team-card { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:13px; border:1px solid var(--line); border-radius:14px; background:#f9fbff; }
.wa-team-card strong,.wa-team-card small { display:block; }
.wa-team-card small { color:var(--muted); margin-top:4px; }
.wa-team-card > div:last-child { text-align:right; }
.wa-architecture-flow { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; padding:18px; background:#0c1f48; border-radius:16px; color:#fff; margin-bottom:12px; }
.wa-architecture-flow span { padding:9px 12px; border-radius:10px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.12); font-weight:800; font-size:12px; }
.wa-architecture-flow b { color:#53da92; }
.wa-qr-demo { text-align:center; padding:16px; border:1px dashed #a9b8ce; border-radius:16px; background:#f8fbff; }
.wa-qr-demo strong,.wa-qr-demo span { display:block; }
.wa-qr-demo span { color:var(--muted); font-size:12px; margin:5px auto 12px; max-width:520px; }
.wa-qr-placeholder { width:150px; height:150px; margin:0 auto; display:grid; place-items:center; border-radius:10px; background:repeating-conic-gradient(#111 0 25%,#fff 0 50%) 0/18px 18px; color:#fff; font-size:20px; font-weight:900; text-shadow:0 1px 5px #000; border:8px solid #fff; box-shadow:0 8px 24px rgba(0,0,0,.14); }
.security-ok { color:var(--success); }
@media (max-width:1100px){ .wa-connection-layout{grid-template-columns:1fr 1fr}.wa-connection-actions{grid-column:1/-1;flex-direction:row}.wa-connection-actions .btn{flex:1}.wa-team-grid{grid-template-columns:repeat(2,minmax(220px,1fr))} }
@media (max-width:700px){ .wa-connection-layout,.wa-connection-data,.wa-team-grid{grid-template-columns:1fr}.wa-connection-actions{flex-direction:column}.wa-architecture-flow{align-items:stretch;flex-direction:column;text-align:center}.wa-architecture-flow b{transform:rotate(90deg)} }

/* V10 - fluxo operacional dentro do lead */
.lead-detail-actions { flex-wrap: wrap; }
.document-edit-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px; }
.document-edit-item { display:flex; align-items:center; gap:10px; padding:12px; border:1px solid var(--line); border-radius:12px; background:#f9fbff; font-weight:700; font-size:12px; }
.document-edit-item input { width:auto; }
@media (max-width:700px){ .document-edit-grid{grid-template-columns:1fr}.lead-detail-actions .btn{flex:1 1 100%} }

/* WhatsApp real */
.wa-qr-image{display:block;width:220px;height:220px;max-width:100%;object-fit:contain;margin:10px auto 0;background:#fff;border:10px solid #fff;border-radius:14px;box-shadow:0 10px 28px rgba(0,0,0,.15)}
#wa-real-qr{min-height:170px;display:grid;place-items:center}

/* =========================================================
   PR7 V12 · Identidade visual branca, preta e dourada
   ========================================================= */
:root {
  --primary: #CFAB6D;
  --primary-dark: #A78348;
  --navy: #151515;
  --navy-2: #222222;
  --bg: #ffffff;
  --surface: #ffffff;
  --text: #171717;
  --muted: #77736c;
  --line: #ece6dc;
  --shadow: 0 16px 44px rgba(35, 29, 19, .08);
}
html, body { background: #fff; color: var(--text); }
a { color: #9a783f; }
.login-screen {
  background:
    radial-gradient(circle at 12% 10%, rgba(207,171,109,.16), transparent 32%),
    radial-gradient(circle at 88% 92%, rgba(207,171,109,.10), transparent 28%),
    #fbfaf7;
}
.login-panel { border: 1px solid #eee7dc; box-shadow: 0 28px 80px rgba(42,32,18,.12); }
.brand-logo-box { background: #fff; border: 1px solid #ede6db; border-radius: 16px; display: grid; place-items: center; overflow: hidden; }
.brand-logo-box img { width: 100%; height: 100%; object-fit: contain; display: block; }
.login-logo-box { width: 150px; height: 64px; padding: 9px 12px; box-shadow: 0 9px 24px rgba(34,25,12,.06); }
.sidebar-logo-box { width: 86px; height: 50px; padding: 7px 8px; flex: 0 0 auto; }
.logo-mark { background: #CFAB6D; color: #111; box-shadow: none; }
.eyebrow { background: #f5ede0; color: #9a783f; border: 1px solid #eadbc2; }
.login-copy h1 { color: #171717; }
.login-form { background: #fcfbf9; }
input:focus, select:focus, textarea:focus { border-color: #CFAB6D; box-shadow: 0 0 0 3px rgba(207,171,109,.16); }
.demo-access button { color: #222; }
.demo-access button:hover { border-color: #CFAB6D; color: #8c6c37; background: #fffaf2; }
.sidebar {
  background: #fff;
  color: #171717;
  border-right: 1px solid #eee8df;
  box-shadow: 10px 0 35px rgba(47,36,18,.035);
}
.sidebar-brand { align-items: center; border-bottom: 1px solid #f0ebe2; margin-bottom: 10px; padding-bottom: 15px; }
.sidebar-brand strong { color: #171717; }
.sidebar-brand span { color: #8b8378; }
.menu-item { color: #4c4944; position: relative; border: 1px solid transparent; }
.menu-item:hover { color: #8a6935; background: #fbf7ef; border-color: #f1e6d3; }
.menu-item.active { background: linear-gradient(90deg, #f7efdf 0%, #fff 100%); color: #8b6832; border-color: #ead8b8; }
.menu-item.active::before { content: ''; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: #CFAB6D; }
.sidebar-footer { border-top-color: #eee8df; color: #807970; }
.link-button { color: #9a783f; font-weight: 800; }
.main-content { background: #fff; }
.topbar { position: sticky; top: 0; z-index: 35; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); padding: 10px 0 14px; border-bottom: 1px solid rgba(236,230,220,.82); }
.topbar-brand-mini { display: none; width: 80px; height: 38px; padding: 4px 7px; background: #fff; border: 1px solid #eee6d9; border-radius: 10px; }
.topbar-brand-mini img { width: 100%; height: 100%; object-fit: contain; }
.topbar h2 { color: #CFAB6D; letter-spacing: -.025em; }
.panel-header h3, .toolbar h3, .form-section h4 { color: #b58e50; }
.icon-button, .user-chip, .panel, .stat-card, .table-card, .info-card, .property-card, .aux-card { border-color: #ece6dc; }
.user-chip > span { background: #f4ecdf; color: #8f6d39; }
.btn-primary { background: #CFAB6D; color: #17120b; box-shadow: 0 8px 20px rgba(207,171,109,.18); }
.btn-primary:hover { background: #c39d5c; }
.btn-secondary { background: #fff; color: #5c4b31; border: 1px solid #ded2c0; }
.btn-secondary:hover { background: #fbf7ef; }
.stat-card.money strong, .property-price { color: #ad8649; }
.stat-card { box-shadow: 0 8px 24px rgba(48,37,20,.035); }
.tab.active { background: #171717; color: #CFAB6D; border-color: #171717; }
.bar { background: #CFAB6D; }
.bar.secondary { background: #e8d5b5; }
.calendar-event { background: #f6eddf; color: #76572c; }
.kanban-column { background: #faf8f4; border: 1px solid #eee7dc; }
.info-list div, .calculation-line, .permission-row.header, .login-form { background: #fbfaf7; }
.notice { background: #fbf4e8; color: #684e27; border: 1px solid #efe0c7; }
.finance-status { background: #f5eddf; color: #805f2f; }
.property-card { box-shadow: 0 10px 28px rgba(46,34,17,.055); transition: transform .18s ease, box-shadow .18s ease; }
.property-card:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(46,34,17,.09); }
.property-image { background: linear-gradient(145deg, #f4eee4, #fcfaf6); }
.property-placeholder { width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: 8px; padding: 28px; color: #8c8274; font-size: 12px; }
.property-placeholder img { width: min(190px, 72%); height: auto; object-fit: contain; opacity: .46; }
.property-source-row { display: flex; gap: 8px; justify-content: space-between; align-items: center; margin-bottom: 8px; color: #9c7a43; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.property-site-link { display: inline-flex; align-items: center; margin-top: 13px; color: #8b6832; font-weight: 900; text-decoration: none; font-size: 12px; }
.property-site-link:hover { text-decoration: underline; }
.property-source-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 17px; margin-bottom: 15px; border: 1px solid #eadfcf; border-radius: 16px; background: linear-gradient(120deg,#fff 20%,#fbf5eb); }
.property-source-banner div { display: grid; gap: 5px; }
.property-source-banner strong { font-size: 16px; color: #28231c; }
.property-source-banner small { color: #7d756b; }
.empty-state { grid-column: 1 / -1; min-height: 190px; display: grid; place-items: center; align-content: center; gap: 7px; border: 1px dashed #dfd2bf; border-radius: 16px; color: #7d7469; background: #fdfbf8; }
.empty-state strong { color: #9c783e; }
.pr7-highlight { background: #171717 !important; border-color: #171717 !important; }
.pr7-highlight span, .pr7-highlight small { color: #d5c7b0 !important; }
.pr7-highlight strong { color: #fff !important; }
.toast { background: #171717; }
@media (max-width: 980px) {
  .topbar-brand-mini { display: grid; }
  .sidebar-logo-box { width: 92px; }
}
@media (max-width: 620px) {
  .login-logo-box { width: 132px; height: 58px; }
  .property-source-banner { align-items: flex-start; flex-direction: column; }
}


/* PR7 V12.1 — correção visual do catálogo de imóveis */
#property-grid.property-grid {
  align-items: start;
  grid-auto-rows: auto !important;
}
#property-grid .pr7-property-card {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 520px;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid #eadfcf !important;
  border-radius: 18px !important;
}
#property-grid .pr7-property-image {
  display: block !important;
  flex: 0 0 235px !important;
  height: 235px !important;
  min-height: 235px !important;
  position: relative !important;
  overflow: hidden !important;
  background: #f6f1e8 !important;
}
#property-grid .pr7-property-image > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
#property-grid .pr7-property-body {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  min-height: 270px !important;
  padding: 16px 17px 17px !important;
  background: #fff !important;
  color: #171717 !important;
  position: relative !important;
  z-index: 3 !important;
  overflow: visible !important;
}
#property-grid .pr7-property-title {
  margin: 0 !important;
  color: #171717 !important;
  font-size: 17px !important;
  line-height: 1.25 !important;
  font-weight: 850 !important;
}
#property-grid .pr7-property-location {
  display: grid !important;
  gap: 3px !important;
  margin-top: 9px !important;
  color: #766b5b !important;
  font-size: 12px !important;
}
#property-grid .pr7-property-location strong {
  color: #9b753d !important;
  font-size: 12px !important;
}
#property-grid .property-price {
  display: block !important;
  margin-top: 13px !important;
  color: #9f773b !important;
  font-size: 22px !important;
  font-weight: 900 !important;
}
#property-grid .pr7-property-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 10px !important;
}
#property-grid .pr7-property-tags span {
  padding: 5px 8px !important;
  border: 1px solid #eadfcf !important;
  border-radius: 999px !important;
  background: #fbf7f0 !important;
  color: #765a31 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}
#property-grid .pr7-property-meta {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 7px 10px !important;
  margin-top: 12px !important;
  color: #5f584f !important;
  font-size: 11px !important;
}
#property-grid .pr7-property-meta span {
  display: block !important;
  padding: 6px 7px !important;
  border-radius: 9px !important;
  background: #faf8f4 !important;
}
#property-grid .pr7-property-link {
  margin-top: auto !important;
  padding-top: 13px !important;
  color: #8b6832 !important;
}
@media (max-width: 760px) {
  #property-grid .pr7-property-card { min-height: 500px; }
  #property-grid .pr7-property-image { flex-basis: 225px !important; height: 225px !important; min-height: 225px !important; }
}