/* ============================================================
   Rediseño bi·tasks — Vista Dueño de Inmobiliaria (prototipo)
   Tokens copiados de bitasks src/index.css para fidelidad 1:1.
   Todo el contenido es SIMULADO — no hay integraciones.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root{
  /* Sidebar */
  --sb:#12141F; --sb2:#1A1D2E; --sb-t:#7A8099; --sb-h:#22263A;
  /* Superficies */
  --bg:#EDEEF3; --surf:#FFFFFF; --brd:#E2E4ED; --brd2:#C8CAD8;
  /* Texto */
  --t1:#14152A; --t2:#52546B; --t3:#9698AC;
  /* Acentos bitasks */
  --amber:#F5A623; --amber-l:#FEF3DC; --amber-d:#D48C0E;
  --indigo:#5B68F0; --indigo-l:#EEF0FE;
  --green:#22C55E; --green-l:#DCFCE7; --green-d:#16A34A;
  --red:#EF4444; --red-l:#FEE2E2;
  --blue:#3B82F6; --blue-l:#DBEAFE;
  --purple:#A855F7; --purple-l:#F3E8FF;
  --r:12px; --rs:8px;
  --sh:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --sh2:0 4px 16px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04);
  --ease:cubic-bezier(.16,1,.3,1);
}
[data-theme="dark"]{
  --sb:#0D0F17; --sb2:#141724; --sb-h:#1D2133;
  --bg:#14161F; --surf:#1E212D; --brd:#2C3040; --brd2:#3A3F55;
  --t1:#ECEDF5; --t2:#AEB2C8; --t3:#767C94;
  --indigo-l:rgba(91,104,240,.16); --green-l:rgba(34,197,94,.15);
  --amber-l:rgba(245,166,35,.15); --blue-l:rgba(59,130,246,.16);
  --purple-l:rgba(168,85,247,.16); --red-l:rgba(239,68,68,.15);
  --sh:0 1px 3px rgba(0,0,0,.3); --sh2:0 4px 16px rgba(0,0,0,.4);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'DM Sans',sans-serif;font-size:14px;line-height:1.5;
  background:var(--bg);color:var(--t1);-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.tnum{font-variant-numeric:tabular-nums}

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

/* ---------- sidebar desplegable ---------- */
.sidebar{
  width:222px;flex:none;background:var(--sb);color:var(--sb-t);
  display:flex;flex-direction:column;padding:14px 10px;gap:2px;
  position:sticky;top:0;height:100vh;
  transition:width .3s var(--ease);overflow:hidden;
}
.app.sb-mini .sidebar{width:64px}
.sb-brand{
  display:flex;align-items:center;gap:9px;padding:8px 10px 16px;color:#fff;
  font-family:'Outfit',sans-serif;font-weight:700;font-size:16.5px;white-space:nowrap;
}
.sb-brand .sun{width:20px;height:20px;flex:none;color:var(--indigo)}
.sb-brand .dot{color:var(--indigo)}
.app.sb-mini .sb-brand span{opacity:0}
.sb-grp{
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:12px 12px 5px;white-space:nowrap;transition:opacity .2s;
}
.app.sb-mini .sb-grp{opacity:0}
.sb-it{
  display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:9px;
  font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;
  transition:background .15s,color .15s;
}
.sb-it svg{width:17px;height:17px;flex:none}
.sb-it:hover{background:var(--sb-h);color:#D5D8E6}
.sb-it.on{background:var(--sb2);color:#fff}
.sb-it.on svg{color:var(--indigo)}
.app.sb-mini .sb-it span{opacity:0}
.sb-foot{margin-top:auto;display:flex;flex-direction:column;gap:2px}
.sb-user{
  display:flex;align-items:center;gap:10px;padding:10px 8px;border-top:1px solid var(--sb-h);
  margin-top:8px;white-space:nowrap;
}
.sb-user .av{
  width:30px;height:30px;border-radius:50%;flex:none;background:var(--indigo);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:11.5px;
}
.sb-user small{display:block;color:var(--sb-t);font-size:11px;line-height:1.3}
.sb-user b{color:#E8EAF4;font-size:12.5px;font-weight:600}
.app.sb-mini .sb-user div{opacity:0}
.sb-collapse{
  position:absolute;top:18px;right:-1px;width:22px;height:22px;border-radius:6px 0 0 6px;
  border:none;background:var(--sb2);color:var(--sb-t);cursor:pointer;display:grid;place-items:center;
}
.sb-collapse:hover{color:#fff}
.app.sb-mini .sb-collapse svg{transform:rotate(180deg)}

/* ---------- main ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  display:flex;align-items:center;gap:12px;padding:12px 26px;
  background:var(--surf);border-bottom:1px solid var(--brd);
  position:sticky;top:0;z-index:20;
}
.crumb{display:flex;align-items:center;gap:7px;color:var(--t3);font-size:13px;white-space:nowrap;overflow:hidden}
.crumb b{color:var(--t1);font-weight:600}
.crumb .sep{opacity:.5}
.topbar .spacer{flex:1}
.searchbtn{
  display:flex;align-items:center;gap:8px;border:1px solid var(--brd);border-radius:9px;
  background:var(--bg);color:var(--t3);font-family:inherit;font-size:12.5px;
  padding:7px 12px;cursor:pointer;min-width:200px;
}
.searchbtn kbd{
  margin-left:auto;border:1px solid var(--brd2);border-radius:5px;padding:1px 5px;
  font-size:10px;font-family:inherit;color:var(--t3);
}
.iconbtn{
  position:relative;width:34px;height:34px;border-radius:9px;border:1px solid var(--brd);
  background:var(--surf);color:var(--t2);cursor:pointer;display:grid;place-items:center;
  transition:transform .15s,background .15s;
}
.iconbtn:hover{transform:translateY(-1px);background:var(--bg)}
.iconbtn .bdg{
  position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;border-radius:99px;
  background:var(--red);color:#fff;font-size:9.5px;font-weight:700;display:grid;place-items:center;padding:0 4px;
}

.page{max-width:1160px;width:100%;margin:0 auto;padding:30px 26px 70px}
.demo-tag{
  display:inline-flex;align-items:center;gap:7px;background:var(--purple-l);color:var(--purple);
  border-radius:99px;padding:4px 12px;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;margin-bottom:18px;
}
.hi{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.hi h1{font-family:'Outfit',sans-serif;font-size:clamp(23px,3.4vw,32px);font-weight:700;letter-spacing:-.025em;line-height:1.12}
.hi .sub{color:var(--t3);margin-top:5px;font-size:13.5px}
.chip{
  display:inline-flex;align-items:center;gap:7px;background:var(--surf);border:1px solid var(--brd);
  border-radius:99px;padding:7px 14px;font-size:12.5px;font-weight:600;color:var(--t2);box-shadow:var(--sh);
}
.chip .dotg{width:7px;height:7px;border-radius:50%;background:var(--green)}

/* ---------- reveal ---------- */
.rise{opacity:0;transform:translateY(14px);animation:rise .7s var(--ease) forwards}
.d1{animation-delay:.04s}.d2{animation-delay:.09s}.d3{animation-delay:.14s}
.d4{animation-delay:.19s}.d5{animation-delay:.24s}.d6{animation-delay:.29s}
.d7{animation-delay:.34s}.d8{animation-delay:.39s}
@keyframes rise{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;animation:none}}

/* ---------- hub cards (vista dueño) ---------- */
.hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px}
.hcard{
  background:var(--surf);border:1px solid var(--brd);border-radius:var(--r);
  padding:20px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:12px;
  transition:transform .2s var(--ease),box-shadow .2s,border-color .2s;position:relative;
}
.hcard:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:var(--brd2)}
.hcard .top{display:flex;align-items:center;gap:12px}
.hcard .ic{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:var(--ic-bg,var(--indigo-l));color:var(--ic-fg,var(--indigo));
}
.hcard .ic svg{width:20px;height:20px}
.hcard h3{font-size:15px;font-weight:700;letter-spacing:-.01em}
.hcard .go{
  margin-left:auto;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  color:var(--t3);transition:.2s;border:1px solid transparent;
}
.hcard:hover .go{background:var(--indigo);color:#fff}
.hcard .body{color:var(--t2);font-size:13px;line-height:1.55;flex:1}
.hcard .foot{display:flex;gap:8px;flex-wrap:wrap}
.pill{
  font-size:11.5px;font-weight:600;border-radius:99px;padding:3px 10px;
  background:var(--bg);color:var(--t2);border:1px solid var(--brd);
}
.pill.g{background:var(--green-l);color:var(--green-d);border-color:transparent}
.pill.a{background:var(--amber-l);color:var(--amber-d);border-color:transparent}
.pill.i{background:var(--indigo-l);color:var(--indigo);border-color:transparent}
.pill.r{background:var(--red-l);color:var(--red);border-color:transparent}
.mini-row{display:flex;gap:14px;margin-top:2px}
.mini-row .m b{display:block;font-family:'Outfit',sans-serif;font-weight:700;font-size:19px;letter-spacing:-.02em}
.mini-row .m small{color:var(--t3);font-size:11px}

/* ---------- agentes (lista) ---------- */
.agrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.acard{
  background:var(--surf);border:1px solid var(--brd);border-radius:var(--r);
  padding:20px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:14px;
  transition:transform .2s var(--ease),box-shadow .2s,border-color .2s;
}
a.acard:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:var(--indigo)}
.acard .who{display:flex;align-items:center;gap:12px}
.acard .av{
  width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-weight:700;font-size:14px;color:#fff;background:var(--av,var(--indigo));
}
.acard .who b{font-size:15px;font-weight:700;display:block;letter-spacing:-.01em}
.acard .who small{color:var(--t3);font-size:12px}
.acard .star{
  margin-left:auto;font-size:11px;font-weight:700;background:var(--amber-l);color:var(--amber-d);
  border-radius:99px;padding:3px 10px;white-space:nowrap;
}
.astats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-top:1px solid var(--brd);padding-top:13px}
.astats .m{text-align:center}
.astats .m b{display:block;font-family:'Outfit',sans-serif;font-weight:700;font-size:18px;letter-spacing:-.02em}
.astats .m small{color:var(--t3);font-size:10.5px;line-height:1.2;display:block}
.acard .cta{
  font-size:12px;font-weight:600;color:var(--indigo);display:flex;align-items:center;gap:6px;
}
.acard.dim{opacity:.92}
.acard.dim .cta{color:var(--t3)}

/* ---------- informe agente ---------- */
.rep-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.rep-head .av{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  font-weight:700;font-size:18px;color:#fff;background:var(--green-d);
}
.rep-head h1{font-family:'Outfit',sans-serif;font-size:clamp(22px,3vw,29px);font-weight:700;letter-spacing:-.025em}
.rep-head .sub{color:var(--t3);font-size:13px;margin-top:3px}
.period{
  margin-left:auto;display:flex;gap:6px;background:var(--surf);border:1px solid var(--brd);
  border-radius:10px;padding:4px;box-shadow:var(--sh);
}
.period button{
  border:none;background:transparent;color:var(--t3);font-family:inherit;font-size:12px;
  font-weight:600;padding:6px 12px;border-radius:7px;cursor:pointer;
}
.period button.on{background:var(--indigo);color:#fff}
.sect{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);
  margin:26px 0 12px;display:flex;align-items:center;gap:10px;
}
.sect::after{content:"";flex:1;height:1px;background:var(--brd)}
.kgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.kpi{
  background:var(--surf);border:1px solid var(--brd);border-radius:var(--r);
  padding:16px 18px;box-shadow:var(--sh);position:relative;overflow:hidden;
  transition:transform .2s var(--ease),box-shadow .2s;
}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--kc,var(--indigo))}
.kpi .n{font-family:'Outfit',sans-serif;font-weight:800;font-size:30px;letter-spacing:-.03em;line-height:1}
.kpi .l{color:var(--t2);font-size:12.5px;font-weight:600;margin-top:6px}
.kpi .d{font-size:11px;margin-top:7px;font-weight:600}
.kpi .d.up{color:var(--green-d)}
.kpi .d.side{color:var(--t3)}
.kpi .note{
  font-size:10.5px;color:var(--t3);margin-top:7px;border-top:1px dashed var(--brd);padding-top:7px;line-height:1.45;
}
.bigbtn{
  display:inline-flex;align-items:center;gap:10px;margin-top:30px;
  background:var(--indigo);color:#fff;border:none;border-radius:11px;
  font-family:inherit;font-size:14px;font-weight:700;padding:13px 26px;cursor:pointer;
  box-shadow:0 8px 22px -8px rgba(91,104,240,.55);
  transition:transform .18s var(--ease),box-shadow .25s;
}
.bigbtn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(91,104,240,.65)}
.back{
  display:inline-flex;align-items:center;gap:7px;color:var(--t3);font-size:12.5px;font-weight:600;
  margin-bottom:14px;transition:color .15s;
}
.back:hover{color:var(--indigo)}

/* ---------- responsive ---------- */
@media(max-width:880px){
  .sidebar{position:fixed;z-index:40;transform:translateX(-100%);transition:transform .3s var(--ease)}
  .app.sb-open .sidebar{transform:none;width:222px}
  .app.sb-mini .sidebar{width:222px}
  .menu-btn{display:grid !important}
  .searchbtn{display:none}
}
.menu-btn{display:none}