:root {
  font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif;
  color: #1a2230;
  background: #f5f7fa;
}
* { box-sizing: border-box; }
body { margin:0; }
.topbar {
  min-height:68px; display:flex; align-items:center; justify-content:space-between;
  padding:10px 24px; background:#111827; color:white;
}
.brand { font-weight:800; letter-spacing:.06em; }
.subtitle { font-size:.82rem; opacity:.72; margin-top:2px; }
.top-actions { display:flex; align-items:center; gap:14px; }
.top-actions form { margin:0; }
.link-button { border:0; background:none; color:white; cursor:pointer; text-decoration:underline; }
.container { max-width:1050px; margin:30px auto; padding:0 18px; }
.hero { display:flex; justify-content:space-between; gap:20px; align-items:stretch; margin-bottom:20px; }
.hero h1 { margin:0 0 6px; font-size:2rem; }
.hero p { margin:0; color:#617083; }
.agent-box { background:white; border:1px solid #e2e7ee; border-radius:14px; padding:14px 18px; min-width:230px; }
.agent-box span, .agent-box small { display:block; color:#6b7280; }
.agent-box strong { display:block; margin:4px 0; }
.card { background:white; border:1px solid #e2e7ee; border-radius:16px; padding:22px; margin-bottom:20px; box-shadow:0 4px 18px rgba(15,23,42,.04); }
.auth-card { max-width:430px; margin:80px auto; background:white; border:1px solid #e2e7ee; border-radius:16px; padding:28px; }
label { display:block; font-weight:650; margin:14px 0 7px; }
input { width:100%; border:1px solid #cbd5e1; border-radius:10px; padding:12px 13px; font-size:1rem; }
button.primary { border:0; border-radius:10px; padding:12px 20px; font-weight:750; cursor:pointer; background:#111827; color:white; }
.auth-card button { width:100%; margin-top:18px; }
.query-row { display:grid; grid-template-columns:1fr auto; gap:10px; }
.notice { color:#6b7280; font-size:.9rem; margin:14px 0 0; }
.muted { color:#6b7280; }
.flash { padding:12px 14px; margin-bottom:15px; border-radius:10px; }
.flash.error, .error-box { background:#fff1f2; color:#9f1239; border:1px solid #fecdd3; }
.table-wrap { overflow:auto; }
table { border-collapse:collapse; width:100%; }
th, td { padding:11px 9px; border-bottom:1px solid #edf0f4; text-align:left; white-space:nowrap; }
a { color:#1d4ed8; text-decoration:none; }
.status { display:inline-block; border-radius:999px; padding:5px 9px; font-size:.76rem; font-weight:800; background:#e5e7eb; }
.status.pendiente { background:#fef3c7; }
.status.procesando { background:#dbeafe; }
.status.finalizada { background:#dcfce7; }
.status.error { background:#fee2e2; }
.query-head { display:flex; justify-content:space-between; gap:20px; align-items:start; }
.query-head h1 { margin:4px 0 10px; font-size:1.45rem; }
.back { margin-bottom:14px; }
.waiting { display:flex; gap:15px; align-items:center; padding:25px 0; }
.waiting p { margin:4px 0 0; color:#6b7280; }
.spinner { width:30px; height:30px; border:3px solid #dbe2ea; border-top-color:#111827; border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.result-banner { border-radius:14px; padding:18px; margin:10px 0 18px; background:#eef2ff; border:1px solid #c7d2fe; }
.result-banner h2 { margin:5px 0 6px; font-size:1.25rem; }
.result-banner p { margin:0; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:16px 0; }
.metric { border:1px solid #e5e7eb; border-radius:12px; padding:13px; }
.metric span, .metric small { display:block; color:#6b7280; font-size:.8rem; }
.metric strong { display:block; margin:4px 0; }
.chosen { background:#f8fafc; border-left:4px solid #334155; padding:14px; margin:16px 0; }
.chosen h3 { margin:0 0 8px; }
@media (max-width:760px) {
  .hero { flex-direction:column; }
  .grid { grid-template-columns:1fr 1fr; }
  .query-row { grid-template-columns:1fr; }
}


/* V0.4.2 */
[hidden] { display: none !important; }

.agent-box.online {
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.agent-box.online strong { color: #166534; }

.agent-box.offline {
  border-color: #fecaca;
  background: #fff7f7;
}
.agent-box.offline strong { color: #991b1b; }

.result-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}
.result-chips span {
  display: inline-block;
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(51,65,85,.16);
  font-size: .76rem;
  font-weight: 800;
}

.grid-five {
  grid-template-columns: repeat(5, 1fr);
}

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