/* =============================================================
   AGENTIFY — UI components for the Artifact Host admin
   Built on top of agentify-tokens.css (design-system tokens).
   Editorial, engraved, ivory paper. No emoji. No gradients.
   ============================================================= */

body { min-height: 100vh; background: var(--bg-canvas); }

.shell { width: min(1180px, 92vw); margin: 0 auto; }

/* ---- Masthead / nav ---------------------------------------- */
.masthead {
  position: sticky; top: 0; z-index: 20;
  background: rgba(247, 245, 241, 0.92);   /* 90%+ ivory, no blur per brand */
  border-bottom: 1px solid var(--rule);
}
.masthead__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding: 16px 0;
}
.brand { display: flex; align-items: center; gap: var(--sp-3); }
.brand__mark { height: 34px; width: auto; }
.brand__word { font-family: var(--font-display); font-weight: 500; font-size: 22px; letter-spacing: 0.04em; color: var(--fg-1); }
.brand__sub { font-family: var(--font-sans); font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-3); }
.masthead__meta {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding: 7px 0; border-top: 1px solid var(--rule-hair);
  font: 600 10px/1 var(--font-sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-3);
}
.masthead__meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Page header ------------------------------------------- */
.pagehead { padding: var(--sp-8) 0 var(--sp-6); }
.pagehead .t-eyebrow { display: block; margin-bottom: var(--sp-4); }
.pagehead h1 { margin: 0 0 var(--sp-3); }
.two-beat .beat-2 { color: var(--oxide-red); }

/* ---- Section numbering ------------------------------------- */
.sec-index { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.sec-index .section-num { font-size: 15px; }

/* ---- Cards ------------------------------------------------- */
.card {
  background: var(--bg-card); border: 1px solid var(--rule);
  border-radius: var(--r-2); padding: var(--sp-6);
  box-shadow: var(--shadow-paper);
}
.card + .card { margin-top: var(--sp-5); }
.card__top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-4); }

/* ---- Forms ------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-4); }
.label {
  font: 600 10px/1 var(--font-sans); letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--fg-3);
}
.input, .textarea, .select {
  font: 400 15px/1.4 var(--font-sans); padding: 12px 14px;
  background: #fff; border: 1px solid var(--rule-strong); border-radius: var(--r-2);
  color: var(--fg-1); outline: none; width: 100%; box-sizing: border-box;
  transition: border-color var(--t-fast) var(--ease-out);
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--onyx); }
.input::placeholder, .textarea::placeholder { color: var(--fg-muted); }
.textarea { min-height: 300px; resize: vertical; font-family: var(--font-mono); font-size: 13px; line-height: 1.55; }
.help { font: 400 12px/1.4 var(--font-sans); color: var(--fg-3); }

/* ---- Buttons ----------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 13px/1 var(--font-sans); letter-spacing: 0.04em;
  padding: 13px 22px; border-radius: var(--r-1); cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--fg-1);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--onyx); color: var(--ivory); }
.btn-primary:hover { background: #000; }
.btn-secondary { border-color: var(--rule-strong); color: var(--fg-1); }
.btn-secondary:hover { background: var(--bg-tint); }
.btn-accent { background: var(--oxide-red); color: var(--ivory); }
.btn-accent:hover { filter: brightness(1.06); }
.btn-ghost { color: var(--fg-2); }
.btn-ghost:hover { color: var(--oxide-red); }
.btn-danger { border-color: var(--rule-strong); color: var(--oxide-red); }
.btn-danger:hover { background: var(--oxide-red); color: var(--ivory); border-color: transparent; }
.btn-sm { padding: 9px 14px; font-size: 12px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Tabs -------------------------------------------------- */
.tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--rule); margin-bottom: var(--sp-6); }
.tab {
  font: 600 11px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase;
  padding: 14px 18px; background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--fg-3); cursor: pointer; transition: color var(--t-fast) var(--ease-out);
}
.tab:hover { color: var(--fg-1); }
.tab.active { color: var(--fg-1); border-bottom-color: var(--oxide-red); }

/* ---- Drop zone --------------------------------------------- */
.drop {
  border: 1px dashed var(--rule-strong); border-radius: var(--r-2);
  padding: var(--sp-7) var(--sp-5); text-align: center; background: var(--bg-tint);
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.drop.drag { border-color: var(--onyx); background: var(--mist-gray); }
.drop strong { font: 600 15px/1.3 var(--font-sans); color: var(--fg-1); }

/* ---- Badges / kind chips ----------------------------------- */
.badge {
  display: inline-flex; align-items: center;
  font: 600 9px/1 var(--font-sans); letter-spacing: 0.18em; text-transform: uppercase;
  padding: 6px 10px; border-radius: var(--r-pill); border: 1px solid var(--rule-strong); color: var(--fg-1);
}
.badge.kind-html { background: var(--powder-blue); border-color: transparent; }
.badge.kind-folder { background: var(--warm-sand); border-color: transparent; }

/* ---- Artifact list ----------------------------------------- */
.list { margin-top: var(--sp-4); }
.item {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-5);
  padding: var(--sp-5) 0; border-top: 1px solid var(--rule-hair);
}
.item:last-child { border-bottom: 1px solid var(--rule-hair); }
.item__title { font: 600 17px/1.2 var(--font-sans); color: var(--fg-1); margin: 0 0 6px; display: flex; align-items: center; gap: 10px; }
.item__meta { font: 400 12px/1.5 var(--font-mono); color: var(--fg-3); }
.item__id { color: var(--fg-1); }
.item__links { display: flex; gap: var(--sp-4); margin-top: 8px; flex-wrap: wrap; }
.item__links a { font: 500 13px/1 var(--font-sans); color: var(--fg-2); border-bottom: 1px solid var(--rule); padding-bottom: 2px; }
.item__links a:hover { color: var(--oxide-red); border-color: var(--rule-brass); }
.item__actions { display: flex; gap: 10px; flex-shrink: 0; }
.empty { padding: var(--sp-6) 0; color: var(--fg-3); font-style: italic; font-family: var(--font-display); }

/* ---- Result / toast banner --------------------------------- */
.result {
  margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5);
  background: var(--bg-tint); border: 1px solid var(--rule); border-radius: var(--r-1);
}
.result::before {
  content: "RESULTADO"; display: block;
  font: 600 10px/1 var(--font-sans); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-3); margin-bottom: 10px;
}
.result.error::before { content: "ERROR"; color: var(--oxide-red); }
.result code { font-family: var(--font-mono); font-size: 12px; }
.result a { color: var(--oxide-red); word-break: break-all; border-bottom: 1px solid var(--rule-brass); }
.token-line { margin-top: 8px; }
.copy-btn { margin-left: 8px; }

/* ---- Footer ------------------------------------------------ */
.foot {
  margin: var(--sp-9) 0 var(--sp-6); padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
  font: 600 10px/1 var(--font-sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-3);
  text-align: center;
}

/* ---- Modal (delete confirm) -------------------------------- */
.scrim {
  position: fixed; inset: 0; background: rgba(26,26,28,0.30); display: none;
  align-items: center; justify-content: center; z-index: 50; padding: var(--sp-5);
}
.scrim.open { display: flex; }
.modal {
  background: var(--bg-card); border: 1px solid var(--rule); border-radius: var(--r-2);
  box-shadow: var(--shadow-deep); width: min(440px, 92vw); padding: var(--sp-6);
}
.modal h3 { margin: 0 0 var(--sp-3); }
.modal p { color: var(--fg-2); margin: 0 0 var(--sp-5); }
.modal__actions { display: flex; justify-content: flex-end; gap: var(--sp-3); }

/* ---- Auth (login) ------------------------------------------ */
.auth { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-5); }
.auth__card { width: min(420px, 92vw); }
.auth__brand { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.auth__brand img { height: 40px; }

.hidden { display: none !important; }