:root{
  --bg:#12161c;
  --surface:#1a2029;
  --titlebar:#20262f;
  --border:#2a313d;
  --border-soft:#232a34;
  --text:#dbe2ea;
  --text-dim:#7c8798;
  --text-faint:#4d5661;
  --accent:#e7a944;
  --accent-soft:#e7a94422;
  --teal:#45c4b0;
  --teal-soft:#45c4b022;
  --danger:#ff6159;
  --mono:'JetBrains Mono', monospace;
  --sans:'Inter', sans-serif;

  --hl-key:#7fb4ff;
  --hl-string:#8fd18f;
  --hl-number:#e7a944;
  --hl-keyword:#c993e0;
  --hl-comment:#5b6472;
  --hl-title:#66c9c9;
  --hl-punct:#8b96a5;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:
    radial-gradient(1100px 500px at 15% -10%, #1c2431 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 10%, #1a2620 0%, transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:var(--sans);
  min-height:100vh;
  padding:0 0 6rem;
}

code{ font-family:var(--mono); }

/* ---------- Header / hero ---------- */
header{
  max-width:1080px;
  margin:0 auto;
  padding:4.5rem 1.5rem 2.5rem;
}
.eyebrow{
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.14em;
  color:var(--teal);
  text-transform:uppercase;
  margin:0 0 0.9rem;
  display:flex;
  align-items:center;
  gap:0.6rem;
}
.eyebrow::before{
  content:"";
  width:7px; height:7px;
  background:var(--teal);
  border-radius:50%;
  box-shadow:0 0 0 4px var(--teal-soft);
  flex-shrink:0;
}
h1{
  font-family:var(--mono);
  font-weight:700;
  font-size:clamp(1.9rem, 4vw, 2.9rem);
  line-height:1.15;
  margin:0 0 0.9rem;
  letter-spacing:-0.01em;
}
h1 .cursor{
  display:inline-block;
  width:0.5em;
  background:var(--accent);
  margin-left:0.1em;
  animation:blink 1.05s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

header p.lede{
  max-width:560ch;
  color:var(--text-dim);
  font-size:1rem;
  line-height:1.65;
  margin:0;
}
header p.lede code{
  color:var(--accent);
  background:#1c222c;
  padding:0.1rem 0.35rem;
  border-radius:4px;
  font-size:0.88em;
}

/* ---------- Nav / router chips ---------- */
.filters{
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem;
  margin-top:2.1rem;
}
.chip{
  font-family:var(--mono);
  font-size:0.82rem;
  color:var(--text-dim);
  background:var(--surface);
  border:1px solid var(--border);
  padding:0.45rem 0.95rem;
  border-radius:999px;
  cursor:pointer;
  text-decoration:none;
  transition:border-color .18s ease, color .18s ease, background .18s ease, transform .12s ease;
}
.chip:hover{ color:var(--text); border-color:#3a4453; transform:translateY(-1px); }
.chip.active{
  color:#141821;
  background:var(--accent);
  border-color:var(--accent);
  font-weight:600;
}

/* ---------- Info note (estructura de respuestas) ---------- */
.info-note{
  max-width:1080px;
  margin:0 auto 2.5rem;
  padding:0 1.5rem;
}

.info-note p.lede{
  max-width:560ch;
  color:var(--text-dim);
  font-size:1rem;
  line-height:1.65;
  margin:0;
}

.field-list{
  margin:1.4rem 0 0;
  display:flex;
  flex-direction:column;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  background:var(--surface);
}

.field{
  display:grid;
  grid-template-columns:190px 1fr;
  gap:1rem;
  padding:1rem 1.25rem;
  border-bottom:1px solid var(--border-soft);
}
.field:last-child{ border-bottom:none; }

.field dt{ margin:0; }
.field dt code{
  font-family:var(--mono);
  font-size:0.82rem;
  color:var(--accent);
  background:#1c222c;
  padding:0.25rem 0.55rem;
  border-radius:6px;
  white-space:nowrap;
}

.field dd{
  margin:0;
  color:var(--text-dim);
  font-size:0.92rem;
  line-height:1.6;
}
.field dd code{
  font-family:var(--mono);
  font-size:0.85em;
  color:var(--teal);
  background:#161b22;
  padding:0.1rem 0.35rem;
  border-radius:4px;
}

@media (max-width:600px){
  .field{ grid-template-columns:1fr; gap:0.35rem; }
}

/* ---------- Grid ---------- */
main{
  max-width:1080px;
  margin:0 auto;
  padding:0 1.5rem;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(420px, 1fr));
  gap:1.4rem;
  transition:opacity .18s ease;
}
main.loading{ opacity:0.35; }

.empty, .error{
  grid-column:1 / -1;
  font-family:var(--mono);
  font-size:0.9rem;
  padding:2rem;
  border:1px dashed var(--border);
  border-radius:12px;
  color:var(--text-dim);
  text-align:center;
}
.error{ color:var(--danger); border-color:#ff615944; }

/* ---------- Card (editor window) ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  opacity:0;
  transform:translateY(18px);
  animation:rise .55s cubic-bezier(.2,.7,.3,1) forwards;
  transition:border-color .2s ease, box-shadow .2s ease;
  display:flex;
  flex-direction:column;
}
.card:hover{
  border-color:#394253;
  box-shadow:0 12px 32px -16px #000a, 0 0 0 1px #2f3847;
}
@keyframes rise{ to{ opacity:1; transform:translateY(0); } }

.titlebar{
  background:var(--titlebar);
  border-bottom:1px solid var(--border);
  padding:0.7rem 0.9rem;
  display:flex;
  align-items:center;
  gap:0.7rem;
}

/* ---------- Panels: Parámetros / Respuesta ---------- */
.panel{ border-bottom:1px solid var(--border-soft); }
.panel:last-of-type{ border-bottom:none; }

.panel-header{
  display:flex;
  align-items:center;
  gap:0.6rem;
  padding:0.55rem 0.9rem;
  background:#1c222c;
  border-bottom:1px solid var(--border-soft);
}
.panel-label{
  font-family:var(--mono);
  font-size:0.68rem;
  font-weight:600;
  letter-spacing:0.09em;
  text-transform:uppercase;
  color:var(--teal);
  flex-shrink:0;
}
.panel-filename{
  font-family:var(--mono);
  font-size:0.78rem;
  color:var(--text-dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.panel-header .lang-tag{ margin-left:auto; }
.panel-header .copy-btn{
  width:26px; height:26px;
  flex-shrink:0;
}
.panel-header .copy-btn svg{ width:13px; height:13px; }

.panel-empty .panel-header{
  border-bottom:none;
}
.badge-muted{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  margin-left:auto;
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--text-faint);
  background:#161b22;
  border:1px solid var(--border-soft);
  padding:0.28rem 0.65rem;
  border-radius:999px;
  white-space:nowrap;
}
.badge-muted svg{ width:12px; height:12px; flex-shrink:0; }
.dots{ display:flex; gap:0.36rem; flex-shrink:0; }
.dots span{ width:10px; height:10px; border-radius:50%; display:block; }
.dots span:nth-child(1){ background:#ff6159; }
.dots span:nth-child(2){ background:#ffbd2e; }
.dots span:nth-child(3){ background:#28c93f; }

.filename{
  font-family:var(--mono);
  font-size:0.86rem;
  color:var(--text);
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lang-tag{
  font-family:var(--mono);
  font-size:0.68rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--text-dim);
  background:#161b22;
  border:1px solid var(--border);
  padding:0.15rem 0.5rem;
  border-radius:5px;
  margin-left:auto;
  flex-shrink:0;
}

.copy-btn{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text-dim);
  width:30px; height:30px;
  border-radius:7px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.copy-btn:hover{ color:var(--text); border-color:#3a4453; background:#1c222c; }
.copy-btn svg{ width:15px; height:15px; }
.copy-btn.copied{ color:var(--teal); border-color:var(--teal); background:var(--teal-soft); }

/* ---------- Code body ---------- */
.code-wrap{
  position:relative;
  max-height:280px;
  overflow:hidden;
  transition:max-height .38s ease;
}
.code-wrap.expanded{
  max-height:560px;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--border) transparent;
}
.code-wrap.expanded::-webkit-scrollbar{ width:8px; }
.code-wrap.expanded::-webkit-scrollbar-track{ background:transparent; }
.code-wrap.expanded::-webkit-scrollbar-thumb{
  background:var(--border);
  border-radius:4px;
}
.code-wrap.expanded::-webkit-scrollbar-thumb:hover{ background:#3a4453; }

.code-scroll{
  display:flex;
  font-family:var(--mono);
  font-size:0.84rem;
  line-height:1.65;
  overflow-x:auto;
}
.gutter{
  user-select:none;
  text-align:right;
  color:var(--text-faint);
  padding:1rem 0.75rem 1rem 1rem;
  background:#161b22cc;
  border-right:1px solid var(--border-soft);
  flex-shrink:0;
}
.gutter div{ padding:0 0.1rem; }

pre{ margin:0; padding:1rem 1.25rem; flex:1; min-width:0; }
pre code{
  white-space:pre-wrap;
  word-break:break-word;
  overflow-wrap:anywhere;
}

.fade{
  position:absolute;
  left:0; right:0; bottom:0;
  height:70px;
  background:linear-gradient(to bottom, transparent, var(--surface) 88%);
  pointer-events:none;
  opacity:1;
  transition:opacity .25s ease;
}
.code-wrap.expanded .fade{ opacity:0; }

.expand-btn{
  width:100%;
  background:var(--titlebar);
  border:none;
  border-top:1px solid var(--border);
  color:var(--text-dim);
  font-family:var(--mono);
  font-size:0.76rem;
  letter-spacing:0.03em;
  padding:0.6rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.4rem;
  transition:color .15s ease, background .15s ease;
}
.expand-btn:hover{ color:var(--accent); background:#1c222c; }
.expand-btn svg{ width:12px; height:12px; transition:transform .25s ease; }
.expand-btn.is-open svg{ transform:rotate(180deg); }

.meta{
  padding:0.95rem 1.1rem 1.1rem;
  border-top:1px solid var(--border-soft);
  display:flex;
  flex-direction:column;
  gap:0.35rem;
}
.meta h3{
  margin:0;
  font-size:0.95rem;
  font-weight:600;
  color:var(--text);
}
.meta h3 code{
  font-family:var(--mono);
  font-size:0.9em;
  color:var(--accent);
  background:#1c222c;
  padding:0.08rem 0.32rem;
  border-radius:4px;
}
.meta p{
  margin:0;
  font-size:0.86rem;
  color:var(--text-dim);
  line-height:1.55;
}
.meta p code{
  font-family:var(--mono);
  font-size:0.85em;
  color:var(--teal);
  background:#161b22;
  border:1px solid var(--border-soft);
  padding:0.1rem 0.35rem;
  border-radius:4px;
}

/* ---------- Syntax colors ---------- */
.hljs-keyword, .hljs-built_in, .hljs-type{ color:var(--hl-keyword); }
.hljs-string, .hljs-attr{ color:var(--hl-string); }
.hljs-number, .hljs-literal{ color:var(--hl-number); }
.hljs-comment{ color:var(--hl-comment); font-style:italic; }
.hljs-title, .hljs-title.function_, .hljs-title.class_{ color:var(--hl-title); }
.hljs-punctuation, .hljs-operator{ color:var(--hl-punct); }
.hljs-attribute{ color:var(--hl-key); }

footer{
  max-width:1080px;
  margin:3rem auto 0;
  padding:0 1.5rem;
  color:var(--text-faint);
  font-family:var(--mono);
  font-size:0.78rem;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
  html{ scroll-behavior:auto; }
}

@media (max-width:600px){
  main{ grid-template-columns:1fr; }
  header{ padding:3rem 1.25rem 2rem; }
}