/* Design system Ximenes Netimóveis — portado do handoff Claude Design (jul/2026) */
:root {
  --roxo: #662E8E; --roxo-escuro: #4A2168; --roxo-suave: #ECE2F4; --roxo-fundo: #F7F2FB;
  --azul: #088EBE; --azul-escuro: #066F95; --azul-suave: #DEF1F8;
  --tinta: #14121A; --texto: #2B2733; --texto-2: #4A4654; --texto-3: #6E6A7A; --texto-4: #9A95A6;
  --papel: #F7F6FA; --borda: #E5E1EC; --borda-2: #F0EEF4; --chip: #EDEAF3;
  --verde: #1F7D54; --verde-suave: #E6F4EC; --vermelho: #B02A3B; --vermelho-suave: #FBE0E4;
  --ambar: #96610D; --ambar-suave: #FBEBD3;
}
* { box-sizing: border-box; margin: 0; }
html, body { margin: 0; }
body { background: var(--papel); color: var(--texto); font-family: 'Montserrat', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--azul); text-decoration: none; }
a:hover { color: var(--azul-escuro); }
::selection { background: var(--roxo-suave); }
input, select, button { font-family: inherit; }
input:focus { outline: none; border-color: var(--roxo) !important; box-shadow: 0 0 0 3px rgba(102, 46, 142, .12); }
select:focus { outline: none; }

/* Header + nav */
#xn-header { position: sticky; top: 0; z-index: 60; background: var(--roxo); box-shadow: 0 1px 0 rgba(0, 0, 0, .12); }
.xn-header-in { max-width: 1240px; margin: 0 auto; padding: 0 28px; height: 64px; display: flex; align-items: center; gap: 36px; }
.xn-logo { height: 26px; display: block; flex: none; }
.xn-nav { display: flex; gap: 26px; flex: 1; height: 100%; }
.xn-nav a { color: rgba(255, 255, 255, .66); font-size: 14px; font-weight: 600; height: 100%; display: flex; align-items: center; padding: 0 2px; transition: color 140ms; }
.xn-nav a:hover { color: #fff; }
.xn-nav a.ativa { color: #fff; font-weight: 700; box-shadow: inset 0 -3px 0 #fff; }
.xn-user { display: flex; align-items: center; gap: 14px; flex: none; }
.xn-user-info { text-align: right; line-height: 1.2; }
.xn-user-info .nome { font-size: 13px; font-weight: 700; color: #fff; }
.xn-user-info .papel { font-size: 11px; color: rgba(255, 255, 255, .62); }
.xn-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--azul); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; flex: none; }
.xn-sair { width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .12); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 140ms; }
.xn-sair:hover { background: rgba(255, 255, 255, .22); }

/* Layout */
main { max-width: 1240px; margin: 0 auto; padding: 34px 28px 80px; }
.xn-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--roxo); margin-bottom: 8px; }
h1.xn-titulo { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--tinta); }
.xn-sub { margin: 8px 0 0; font-size: 14px; color: var(--texto-3); max-width: 640px; line-height: 1.55; }

/* Segmented tabs */
.xn-seg { display: inline-flex; gap: 4px; background: var(--chip); padding: 4px; border-radius: 999px; }
.xn-seg button { display: inline-flex; align-items: center; gap: 8px; border: none; border-radius: 999px; padding: 9px 18px; font-size: 13px; cursor: pointer; transition: all 140ms; background: transparent; color: var(--texto-3); font-weight: 600; font-family: inherit; }
.xn-seg button.ativa { background: #fff; color: var(--roxo); font-weight: 700; box-shadow: 0 1px 3px rgba(20, 18, 26, .12); }
.xn-seg button .num { font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: rgba(0, 0, 0, .06); color: var(--texto-4); }
.xn-seg button.ativa .num { background: var(--roxo-suave); color: var(--roxo); }

/* Filter pills */
.xn-filtros { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.xn-filtro-icone { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--borda); border-radius: 999px; padding: 7px 14px 7px 15px; font-size: 12px; font-weight: 700; color: var(--texto-2); }
.xn-filtro { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--borda); border-radius: 999px; padding: 8px 12px 8px 15px; }
.xn-filtro span { font-size: 12px; color: var(--texto-3); font-weight: 600; }
.xn-filtro select, .xn-filtro input { border: none; background: transparent; font-size: 13px; font-weight: 700; color: var(--texto); cursor: pointer; max-width: 150px; }
.xn-limpar { background: transparent; border: none; font-size: 13px; font-weight: 700; color: var(--roxo); cursor: pointer; padding: 8px 6px; font-family: inherit; }

/* Buttons */
.xn-btn { display: inline-flex; align-items: center; gap: 7px; background: var(--roxo); color: #fff; border: none; border-radius: 999px; padding: 11px 18px; font-size: 13px; font-weight: 700; cursor: pointer; transition: background 140ms, transform 140ms; font-family: inherit; }
.xn-btn:hover { background: var(--roxo-escuro); transform: translateY(-1px); }
.xn-btn-sec { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1.5px solid var(--roxo); color: var(--roxo); border-radius: 999px; padding: 9px 18px; font-size: 13px; font-weight: 700; cursor: pointer; transition: background 140ms; font-family: inherit; }
.xn-btn-sec:hover { background: var(--roxo-fundo); }

/* Pills / tags */
.xn-pill { font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: 999px; display: inline-block; }
.xn-pill.venda { background: var(--azul-suave); color: var(--azul-escuro); }
.xn-pill.locacao, .xn-pill.aluguel { background: var(--roxo-suave); color: var(--roxo); }
.xn-pill.prop { background: var(--ambar-suave); color: var(--ambar); }
.xn-pill.netim { background: var(--vermelho-suave); color: var(--vermelho); }
.xn-pill.captada { display: inline-flex; align-items: center; gap: 6px; background: var(--verde-suave); color: var(--verde); font-size: 12px; padding: 9px 16px; }

/* Cards */
.xn-card { background: #fff; border: 1px solid var(--borda); border-radius: 16px; box-shadow: 0 1px 2px rgba(20, 18, 26, .06); }
.xn-vazio { text-align: center; padding: 70px 20px; background: #fff; border: 1px dashed var(--borda); border-radius: 16px; }
.xn-vazio .t { font-size: 16px; font-weight: 700; color: var(--texto-2); margin-bottom: 6px; }
.xn-vazio .s { font-size: 14px; color: var(--texto-4); }

/* Toast */
#xn-toast { position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 14px); z-index: 100; background: var(--tinta); color: #fff; padding: 14px 22px; border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .32); font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 10px; opacity: 0; pointer-events: none; transition: opacity .2s ease-out, transform .2s ease-out; }
#xn-toast.visivel { opacity: 1; transform: translate(-50%, 0); }

/* Scrollbar (kanban) */
.xn-scroll::-webkit-scrollbar { height: 10px; }
.xn-scroll::-webkit-scrollbar-track { background: transparent; }
.xn-scroll::-webkit-scrollbar-thumb { background: #D6D1E0; border-radius: 999px; }

/* Modal */
.xn-modal-fundo { position: fixed; inset: 0; z-index: 90; background: rgba(20, 18, 26, .55); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 24px; overflow: auto; }
.xn-modal { width: 100%; max-width: 620px; background: #fff; border-radius: 20px; box-shadow: 0 30px 70px rgba(0, 0, 0, .3); overflow: hidden; }
.xn-modal .cab { padding: 26px 30px; border-bottom: 1px solid var(--borda-2); }
.xn-modal .corpo { padding: 26px 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.xn-modal .rodape { padding: 20px 30px; border-top: 1px solid var(--borda-2); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.xn-modal label { display: block; font-size: 12px; font-weight: 700; color: var(--texto-2); margin-bottom: 6px; }
.xn-modal input, .xn-modal select { width: 100%; border: 1px solid var(--borda); border-radius: 10px; padding: 11px 13px; font-size: 14px; color: var(--texto); background: #fff; }

@media (max-width: 760px) {
  .xn-header-in { padding: 0 14px; gap: 14px; }
  .xn-nav { gap: 14px; overflow-x: auto; }
  .xn-user-info { display: none; }
  main { padding: 22px 14px 60px; }
  .xn-modal .corpo { grid-template-columns: 1fr; }
}