:root{
  --bg:#ffffff; --paper:#ffffff; --line:#efefef;
  --tx:#111111; --sub:#6b7280;
  --acc:#111111;                  /* negro para primario */
  --radius:18px; --shadow:0 3px 14px rgba(0,0,0,.04);
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--tx); font-family:var(--font);
  font-size:14px; line-height:1.45;
}

/* Topbar */
.topbar{
  height:56px; display:flex; align-items:center; gap:12px;
  padding:0 16px; border-bottom:1px solid var(--line); background:var(--paper);
}
.topbar .left{ display:flex; align-items:center; gap:8px; }
.topbar .center{ flex:1; }
.topbar .right{ display:flex; align-items:center; gap:8px; }

.dropdown{ background:transparent; border:0; font:inherit; color:var(--tx); cursor:pointer; }
.caret{ font-size:12px; opacity:.7; margin-right:4px; }
.space-name{ font-weight:600; }

/* Base containers */
.container{ max-width:1100px; margin:28px auto; padding:0 16px; }
.container.narrow{ max-width:820px; }
.page-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.page-head h1{ font-size:20px; margin:0; font-weight:600; }
.tools{ display:flex; align-items:center; gap:8px; }

/* Inputs */
.input, .select{
  width:100%; background:#fff; border:1px solid var(--line); color:var(--tx);
  border-radius:9999px; padding:9px 12px; outline:0; font-size:13px;
}
.input.slim{ max-width:280px; }
.input-wrap{ position:relative; min-width:260px; }
.input-wrap .input{ padding-right:32px; }
.kbd{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-size:11px; color:var(--sub); border:1px solid var(--line);
  border-radius:8px; padding:2px 6px; background:#fff;
}
.textarea{ resize:vertical; min-height:140px; border-radius:16px; }

/* Buttons (pills) */
.btn{
  background:#fff; border:1px solid var(--line); color:var(--tx);
  border-radius:9999px; padding:9px 12px; cursor:pointer; font-size:13px;
}
.btn.primary{ background:var(--acc); color:#fff; border-color:var(--acc); font-weight:600; }
.btn.ghost{ background:#fff; }
.icon-btn{
  background:#fff; border:1px solid var(--line);
  border-radius:9999px; padding:6px 8px; font-size:12px; line-height:1;
}

/* Tabs tipo pill */
.view-toggle{ display:flex; gap:8px; }
.tab{
  background:#fff; border:1px solid var(--line); color:var(--tx);
  padding:7px 12px; border-radius:9999px; cursor:pointer; font-size:13px;
}
.tab.active{ background:var(--acc); color:#fff; border-color:var(--acc); }

/* Cards / listas */
.cards{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:14px; }
.card{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:14px;
}
.site-card .meta{ color:var(--sub); font-size:12px; }
.site-card .row{ display:flex; align-items:center; gap:8px; }
.site-card .row .sep{ flex:1; }
.thumb{
  border:1px solid var(--line); border-radius:12px; background:linear-gradient(180deg,#fafafa,#f7f7f7);
  height:140px; margin-bottom:10px;
}

/* Empty state */
.empty{
  text-align:center; padding:48px 12px; border:1px dashed var(--line);
  border-radius:20px; background:#fff;
}
.empty h2{ margin:0 0 6px; font-size:20px; }
.empty p{ color:var(--sub); margin:0 0 12px; }
.actions-row{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.hide{ display:none; }

.title-center{ text-align:center; margin:12px 0 18px; font-size:22px; font-weight:600; }
.prompt-card{ padding:16px; border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); background:#fff; }

/* Helpers */
.row{ display:flex; align-items:center; }
.row.gap{ gap:8px; flex-wrap:wrap; }
.row.end{ justify-content:flex-end; gap:8px; }
.sep{ flex:1; }
.muted{ color:var(--sub); }

/* Responsive */
@media (max-width: 720px){
  .page-head{ flex-direction:column; align-items:flex-start; gap:10px; }
  .tools{ width:100%; }
  .input-wrap{ min-width:unset; width:100%; }
}

/* Inline prompt en estado vacío del Dashboard */
.inline-prompt{
  margin-top:14px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
}
.inline-prompt .textarea{ min-height:120px; }