/* =====================================================================
   CORRETOR TURBINADO — UI (Material Design 3)
   MD3 com a paleta da marca: azul-marinho (primary) + laranja (tertiary/ação).
   Tipografia Roboto. Elevação em camadas, cantos arredondados, state layers.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Roboto+Flex:opsz,wght@8..144,500;8..144,700&display=swap');

:root {
    /* MD3 color roles — derivados da marca */
    --md-primary:        #16285a;   /* azul-marinho */
    --md-primary-2:      #1e3a7a;
    --md-on-primary:     #ffffff;
    --md-primary-container: #dde6fb;
    --md-on-primary-container: #0c1838;

    --md-tertiary:       #f26a21;   /* laranja turbo = ação/destaque */
    --md-tertiary-2:     #ff8534;
    --md-on-tertiary:    #ffffff;
    --md-tertiary-container: #ffe2cf;
    --md-on-tertiary-container: #5a2300;

    --md-surface:        #faf9fd;
    --md-surface-1:      #f3f3fa;   /* elevação 1 (tonal) */
    --md-surface-2:      #eef0f8;
    --md-surface-3:      #e9ecf6;
    --md-surface-variant:#e1e2ec;
    --md-on-surface:     #1a1c20;
    --md-on-surface-var: #45464f;
    --md-outline:        #c5c6d0;
    --md-outline-var:    #e2e3ec;

    --md-error:          #ba1a1a;
    --md-success:        #1f9d57;

    /* elevação MD3 (sombras tonais em camadas) */
    --md-elev-1: 0 1px 2px rgba(0,0,0,.12), 0 1px 3px 1px rgba(0,0,0,.07);
    --md-elev-2: 0 1px 2px rgba(0,0,0,.12), 0 2px 6px 2px rgba(0,0,0,.08);
    --md-elev-3: 0 4px 8px 3px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.12);

    /* aliases de compatibilidade com telas já feitas */
    --ink: var(--md-on-surface); --ink-soft: var(--md-on-surface-var);
    --paper: var(--md-surface-1); --paper-2: var(--md-surface-2);
    --card: #ffffff; --navy: var(--md-primary); --navy-2: var(--md-primary-2);
    --navy-deep:#0d1a3d; --orange: var(--md-tertiary); --orange-2: var(--md-tertiary-2);
    --orange-soft: var(--md-tertiary-container);
    --amber: var(--md-tertiary); --amber-soft: var(--md-tertiary-container);
    --teal: var(--md-primary); --teal-2: var(--md-primary-2);
    --red: var(--md-error); --green: var(--md-success);
    --line: var(--md-outline-var);
    --radius: 16px;
    --shadow: var(--md-elev-2); --shadow-sm: var(--md-elev-1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Roboto', system-ui, sans-serif;
    background: var(--md-surface);
    color: var(--md-on-surface);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { font-family: 'Roboto Flex','Roboto', sans-serif; font-weight: 700; line-height: 1.2; letter-spacing:0; }
a { color: var(--md-primary-2); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ---------- LOGIN ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center;
    background: radial-gradient(circle at 15% 15%, rgba(30,58,122,.14), transparent 45%),
      radial-gradient(circle at 85% 80%, rgba(242,106,33,.12), transparent 45%), var(--md-surface); }
.login-card { width: min(410px, 92vw); background: var(--card); padding: 44px 38px;
    border-radius: 28px; box-shadow: var(--md-elev-3); }
.login-card .brand { font-family:'Roboto Flex'; font-size: 26px; font-weight:700; color: var(--md-primary); }
.login-card .brand span { color: var(--md-tertiary); }
.login-card .sub { color: var(--md-on-surface-var); font-size: 14px; margin: 4px 0 28px; }

/* ---------- LAYOUT ---------- */
.app { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }
/* navigation drawer (MD3) */
.sidebar { background: var(--md-surface-1); color: var(--md-on-surface); padding: 18px 12px;
    display: flex; flex-direction: column; gap: 2px; position: sticky; top:0; height:100vh;
    overflow-y:auto; border-right: 1px solid var(--md-outline-var); }
.sidebar .brand-logo { display:flex; align-items:center; gap:10px; margin:6px 8px 14px; padding: 10px;
    background:#fff; border-radius:16px; box-shadow: var(--md-elev-1); }
.sidebar .brand-logo img { width: 100%; max-width: 200px; height:auto; display:block; }
.sidebar .logo { font-family:'Roboto Flex'; font-weight:700; font-size: 20px; color:var(--md-primary); }
.sidebar .logo span { color: var(--md-tertiary); }
.sidebar .tag { font-size:10px; text-transform:uppercase; letter-spacing:2px;
    color: var(--md-on-surface-var); margin: 0 12px 16px; }
/* nav items = MD3 navigation drawer items (pílula) */
.nav-item { display:flex; align-items:center; gap:12px; padding: 13px 16px; border-radius: 28px;
    color: var(--md-on-surface-var); font-weight:500; font-size:14px; border:none;
    background:transparent; width:100%; text-align:left; transition: background .18s, color .18s; position:relative; }
.nav-item:hover { background: rgba(22,40,90,.06); color: var(--md-primary); }
.nav-item.active { background: var(--md-primary-container); color: var(--md-on-primary-container); font-weight:600; }
.nav-item .nav-ic { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.ic { display:inline-block; vertical-align:middle; }
.nav-sep { height:1px; background:var(--md-outline-var); margin:10px 8px; }
/* bolinha de status (substitui emojis coloridos) */
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; vertical-align:middle; margin-right:5px; }
/* topbar (só mobile) */
.topbar { display:none; align-items:center; gap:12px; padding:10px 14px; background:var(--md-surface-1);
    border-bottom:1px solid var(--md-outline-var); position:sticky; top:0; z-index:40; }
.topbar .menu-toggle { font-size:22px; line-height:1; background:none; border:none; color:var(--md-on-surface); padding:4px 8px; cursor:pointer; }
.topbar .topbar-logo { height:30px; width:auto; cursor:pointer; }
.sidebar-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:45; }
.sidebar-backdrop.show { display:block; }
.sidebar .spacer { flex:1; }
.sidebar .user { font-size:13px; color:var(--md-on-surface-var); border-top:1px solid var(--md-outline-var);
    padding: 14px 12px 4px; margin-top:8px; }
.sidebar .user a { color: var(--md-tertiary); }

.main { padding: 28px 36px; overflow-x:hidden; }
.page-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 24px; gap:16px; }
.page-head h1 { font-size: 26px; color: var(--md-on-surface); font-weight:700; }
.page-head .muted { color: var(--md-on-surface-var); font-size:14px; }

/* ---------- KPIs (filled tonal cards) ---------- */
.kpi-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap:16px; margin-bottom:24px; }
.kpi { background: var(--card); border-radius: 20px; padding: 20px; box-shadow: var(--md-elev-1);
    position:relative; overflow:hidden; transition: box-shadow .18s, transform .18s; }
.kpi:hover { box-shadow: var(--md-elev-2); transform: translateY(-2px); }
.kpi .label { font-size:12px; letter-spacing:.3px; color:var(--md-on-surface-var); font-weight:500; }
.kpi .value { font-family:'Roboto Flex'; font-size: 32px; font-weight:700; color:var(--md-primary); margin-top:6px; }
.kpi .delta { font-size:12px; font-weight:500; margin-top:4px; }
.kpi .delta.up { color: var(--md-success); } .kpi .delta.down { color: var(--md-error); }
.kpi .sub { font-size:12px; color:var(--md-on-surface-var); margin-top:2px; }
.kpi.accent { background: var(--md-primary); }
.kpi.accent .label, .kpi.accent .sub { color: rgba(255,255,255,.8); }
.kpi.accent .value { color:#fff; }

/* ---------- CARDS (elevated/outlined) ---------- */
.card { background: var(--card); border-radius: 16px; box-shadow: var(--md-elev-1);
    padding: 22px; margin-bottom: 18px; border: 1px solid var(--md-outline-var); }
.card h3 { font-size: 17px; margin-bottom: 14px; color: var(--md-on-surface); font-weight:600; }
.card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.card-head h3 { margin-bottom:0; }
table { width:100%; border-collapse: collapse; font-size: 14px; }
th { text-align:left; font-size:12px; letter-spacing:.3px; color: var(--md-on-surface-var);
    font-weight:500; padding: 12px; border-bottom: 1px solid var(--md-outline-var); }
td { padding: 14px 12px; border-bottom: 1px solid var(--md-outline-var); }
tr:hover td { background: var(--md-surface-2); cursor:pointer; }

/* ---------- CHIPS / BADGES (MD3 chips) ---------- */
.badge { display:inline-block; padding: 4px 11px; border-radius: 8px; font-size:12px; font-weight:500; }
.badge.A { background: #d4f3e1; color: #0d6b3a; }
.badge.B { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.badge.C { background: #ffdad6; color: #93000a; }
.badge.neutro { background: var(--md-surface-variant); color: var(--md-on-surface-var); }
.score-pill { font-family:'Roboto Flex'; font-weight:700; font-size:15px; }
.chip { display:inline-block; background: var(--md-surface-2); border:1px solid var(--md-outline-var);
    border-radius: 8px; padding: 6px 12px; font-size:13px; margin: 3px 4px 3px 0; }

/* ---------- FORMS (MD3 text fields) ---------- */
.field { margin-bottom: 16px; }
.field label { display:block; font-size:13px; font-weight:500; margin-bottom:6px; color: var(--md-on-surface-var); }
.input, select, textarea { width:100%; padding: 13px 14px; border:1px solid var(--md-outline);
    border-radius: 12px; font-family:inherit; font-size:14px; background:var(--md-surface);
    color:var(--md-on-surface); transition:border .18s, box-shadow .18s; }
.input:focus, select:focus, textarea:focus { outline:none; border-color: var(--md-primary);
    border-width:2px; padding:12px 13px; }
textarea { resize: vertical; min-height: 80px; }
.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

/* ---------- BOTÕES (MD3: filled, tonal, text, FAB) ---------- */
.btn { display:inline-flex; align-items:center; gap:8px; padding: 11px 24px; border-radius: 100px;
    border:none; font-weight:500; font-size:14px; letter-spacing:.2px; transition: box-shadow .18s, background .18s;
    background: var(--md-primary); color:var(--md-on-primary); }
.btn:hover { background: var(--md-primary-2); box-shadow: var(--md-elev-1); }
.btn.amber, .btn.orange { background: var(--md-tertiary); color:var(--md-on-tertiary); }
.btn.amber:hover, .btn.orange:hover { background: var(--md-tertiary-2); }
.btn.ghost { background: transparent; color: var(--md-primary); border:1px solid var(--md-outline); }
.btn.ghost:hover { background: rgba(22,40,90,.06); box-shadow:none; }
.btn.sm { padding: 8px 16px; font-size:13px; }
.btn:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }

/* ---------- DETALHE / KV ---------- */
.detail-grid { display:grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items:start; }
.kv { display:flex; justify-content:space-between; padding: 9px 0; border-bottom:1px solid var(--md-outline-var); font-size:14px; }
.kv .k { color: var(--md-on-surface-var); } .kv .v { font-weight:500; }

/* ---------- TABS (MD3) ---------- */
.tabs { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:16px; border-bottom:1px solid var(--md-outline-var); }
.tab { padding: 10px 16px; border:none; background:transparent; font-size:13px; font-weight:500;
    color: var(--md-on-surface-var); border-bottom:2px solid transparent; border-radius:8px 8px 0 0; }
.tab.active { color: var(--md-primary); border-bottom-color: var(--md-primary); background: rgba(22,40,90,.04); }
.tab-pane { padding-top: 4px; }
.ad-box { background: var(--md-surface-2); border-radius: 12px; padding:16px;
    white-space: pre-wrap; font-size:14px; line-height:1.6; }

/* ---------- MODAL (MD3 dialog) ---------- */
.modal-bg { position:fixed; inset:0; background: rgba(0,0,0,.4); display:none;
    place-items:center; z-index: 100; padding:20px; }
.modal-bg.open { display:grid; }
.modal { background:var(--md-surface-1); border-radius:28px; width:min(720px,96vw); max-height:90vh;
    overflow:auto; padding: 28px; box-shadow: var(--md-elev-3); position:relative; }
.modal h2 { font-size:22px; margin-bottom:18px; color: var(--md-on-surface); font-weight:600; padding-right:36px; }
.modal-close { position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%;
    border:none; background:var(--md-surface-3); color:var(--md-on-surface-var); font-size:22px; line-height:1;
    cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; z-index:2; }
.modal-close:hover { background:var(--md-outline); color:var(--md-on-surface); }

/* ---------- UTIL ---------- */
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.muted { color: var(--md-on-surface-var); }
.toolbar { display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.toolbar .input { max-width: 280px; }
.loading { display:inline-block; width:16px; height:16px; border:2.5px solid rgba(255,255,255,.35);
    border-top-color:#fff; border-radius:50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty { text-align:center; padding: 50px; color: var(--md-on-surface-var); }
.hidden { display:none !important; }

/* ---------- DASHBOARD ---------- */
.dash-grid { display:grid; grid-template-columns: 1.5fr 1fr; gap:18px; align-items:start; }
.rank-row { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--md-outline-var); }
.rank-row:last-child { border-bottom:none; }
.rank-num { width:28px; height:28px; border-radius:8px; background:var(--md-primary); color:#fff;
    display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex:0 0 auto; }
.rank-row:nth-child(1) .rank-num { background: var(--md-tertiary); }
.bar-track { flex:1; background:var(--md-surface-3); border-radius:100px; height:10px; overflow:hidden; }
.bar-fill { height:100%; background: var(--md-primary); border-radius:100px; }
.mini-stat { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--md-outline-var); font-size:14px; }
.mini-stat:last-child { border-bottom:none; } .mini-stat b { color: var(--md-primary); }
.funnel-step { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.funnel-bar { height:34px; border-radius:8px; background: var(--md-primary);
    display:flex; align-items:center; padding:0 12px; color:#fff; font-size:13px; font-weight:500; min-width:60px; }

@media (max-width: 980px) { .dash-grid { grid-template-columns: 1fr; } }

/* ====================== MOBILE ====================== */
@media (max-width: 860px) {
    .app { grid-template-columns: 1fr; display:block; }
    .topbar { display:flex; }

    /* sidebar vira drawer deslizante a partir da esquerda */
    .sidebar { position:fixed; top:0; left:0; bottom:0; width:80%; max-width:300px;
        flex-direction:column; align-items:stretch; height:100vh; overflow-y:auto;
        transform:translateX(-100%); transition:transform .25s ease; z-index:50;
        border-right:1px solid var(--md-outline-var); }
    .sidebar.open { transform:translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.25); }
    .sidebar .brand-logo { margin-top:8px; }
    .sidebar .tag { display:block; }
    .sidebar .spacer { flex:1; }
    .sidebar .user { display:block; }
    .nav-item { font-size:15px; padding:14px 16px; } /* alvo de toque maior */

    .main { padding: 16px 14px; }

    /* page-head: título em cima, ações embaixo, botões largura cheia */
    .page-head { flex-direction:column; align-items:stretch; gap:12px; margin-bottom:18px; }
    .page-head h1 { font-size:22px; }
    .page-head .row, .page-head > div:last-child { display:flex; flex-wrap:wrap; gap:8px; }
    .page-head .btn { flex:1 1 auto; justify-content:center; }

    /* grids viram coluna única */
    .detail-grid, .grid-2, .grid-3, .dash-grid, .kpi-grid { grid-template-columns: 1fr !important; }

    /* TABELAS: scroll horizontal suave em vez de quebrar o layout */
    table { display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; }
    table thead th, table tbody td { white-space:nowrap; }

    /* toolbar e inputs largura cheia */
    .toolbar { flex-direction:column; align-items:stretch; }
    .toolbar .input { max-width:none; width:100%; }

    /* modais ocupam quase a tela toda */
    .modal { width:94vw !important; max-width:94vw !important; max-height:90vh; overflow-y:auto; }

    /* botões dentro de cards não espremem */
    .card .row { flex-wrap:wrap; gap:8px; }

    /* KPIs e mini-stats com texto que pode quebrar */
    .kpi-grid { gap:10px; }
}

/* telas bem pequenas */
@media (max-width: 480px) {
    .page-head h1 { font-size:20px; }
    .nav-item { font-size:15px; }
    .modal { width:96vw !important; max-width:96vw !important; padding:16px !important; }
    .btn { font-size:14px; }
}

/* ---------- CRM Kanban ---------- */
.kanban { display:flex; gap:12px; overflow-x:auto; padding-bottom:12px; align-items:flex-start; }
.kan-col { flex:0 0 240px; background:var(--md-surface-2,#f4f4f7); border-radius:14px; padding:10px; }
.kan-head { font-weight:600; font-size:13px; color:var(--md-primary); margin-bottom:8px;
  display:flex; align-items:center; justify-content:space-between; }
.kan-count { background:var(--md-primary-container,#dde3f3); color:var(--md-primary); border-radius:10px;
  padding:1px 8px; font-size:12px; }
.kan-drop { min-height:60px; display:flex; flex-direction:column; gap:8px; border-radius:10px; transition:background .12s; }
.kan-drop.kan-over { background:var(--md-primary-container,#dde3f3); outline:2px dashed var(--md-primary); }
.kan-card { background:#fff; border-radius:10px; padding:10px; box-shadow:var(--md-elev-1,0 1px 3px rgba(0,0,0,.12));
  cursor:grab; border:1px solid var(--md-outline-var,#e3e3e8); }
.kan-card:active { cursor:grabbing; }
.kan-card:hover { box-shadow:var(--md-elev-2,0 2px 8px rgba(0,0,0,.16)); }

/* ---------- CRM Kanban no mobile ---------- */
@media (max-width: 860px) {
  .kanban { gap:10px; scroll-snap-type:x mandatory; }
  .kan-col { flex:0 0 78%; max-width:78%; scroll-snap-align:start; }
  .kan-card { padding:12px; } /* alvo de toque maior */
  /* dica visual de que dá pra rolar lateralmente */
  .kanban::-webkit-scrollbar { height:6px; }
  .kanban::-webkit-scrollbar-thumb { background:var(--md-outline-var); border-radius:3px; }
}
/* botão de mover estágio no mobile (fallback ao drag) */
.kan-card .estagio-sel { display:none; margin-top:8px; width:100%; font-size:12px;
  padding:6px; border-radius:8px; border:1px solid var(--md-outline-var); background:#fff; }
@media (max-width: 860px) { .kan-card .estagio-sel { display:block; } }

/* seletor segmentado (filtro Venda/Locação) */
.seg { display:inline-flex; border:1px solid var(--md-outline-var); border-radius:10px; overflow:hidden; }
.seg-btn { border:none; background:var(--md-surface-1); color:var(--md-on-surface-var); padding:8px 14px; font-size:13px; cursor:pointer; font-family:inherit; }
.seg-btn + .seg-btn { border-left:1px solid var(--md-outline-var); }
.seg-btn.active { background:var(--md-primary); color:#fff; font-weight:600; }
@media (max-width:860px){ .seg { width:100%; } .seg-btn { flex:1; } }

/* títulos de grupo no menu lateral */
.nav-grupo { font-size:10px; text-transform:uppercase; letter-spacing:1.5px; font-weight:700;
  color:var(--md-on-surface-var); opacity:.6; margin:14px 12px 4px; }
.nav-grupo:first-of-type { margin-top:8px; }

/* botões de ícone nas listagens */
.btn-ico { background:transparent; border:1px solid var(--md-outline-var); border-radius:8px;
  padding:5px; cursor:pointer; color:var(--md-on-surface-var); line-height:0; margin-left:4px;
  display:inline-flex; align-items:center; justify-content:center; transition:all .12s; }
.btn-ico:hover { background:var(--md-surface-2); color:var(--md-primary); border-color:var(--md-primary); }
.btn-ico.danger:hover { color:var(--md-error); border-color:var(--md-error); }
@media (max-width:480px){ .btn-ico { padding:7px; } }