/* =============================================================================
   Utiliobox — estilos propios del formateador de JSON.
   Solo tokens de utiliobox.css. Reutiliza tabs, notice, select, input y btn
   del sistema compartido; aquí solo vive lo que es de esta herramienta:
   el panel dividido, el resaltado, el árbol y la radiografía.
   ============================================================================= */

/* --- Panel dividido --- */
.json-split {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
}
.json-pane { display: flex; flex-direction: column; min-width: 0; }
.json-pane + .json-pane { border-left: 1px solid var(--border); }

.json-bar {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-2) var(--s-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  min-height: 52px;
}
.json-bar__title { font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--ink-soft); }
.json-bar__actions { margin-left: auto; display: flex; gap: var(--s-2); }
.json-tabs { border-bottom: 0; margin: 0; flex: 1 1 auto; }
.json-tabs .tab { padding-block: var(--s-2); }

/* .inline-field vive ahora en utiliobox.css (seccion 7): lo usan varias herramientas. */

/* --- Área de texto de entrada --- */
.json-area {
  flex: 1 1 auto; width: 100%; min-height: 340px; resize: vertical;
  padding: var(--s-4);
  border: 0; background: var(--surface); color: var(--ink);
  font-family: var(--mono); font-size: var(--fs-xs); line-height: 1.6;
  white-space: pre; overflow: auto; tab-size: 2;
}
.json-area:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.json-area::placeholder { color: var(--ink-mute); font-family: var(--sans); white-space: pre-wrap; }

.json-foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--border); background: var(--surface);
}
.json-samples__label { font-size: var(--fs-xs); color: var(--ink-mute); margin-right: var(--s-1); }
.json-count { margin-left: auto; font-family: var(--mono); font-size: var(--fs-2xs); color: var(--ink-mute); }

/* --- Barra de acciones de la salida --- */
.json-tools {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border); background: var(--surface);
}
.json-tools__end { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.json-matches { font-family: var(--mono); font-size: var(--fs-2xs); color: var(--ok); }
.json-matches--none { color: var(--ink-mute); }

/* --- Salida de texto: numeración de líneas con un contador CSS --- */
.json-view { flex: 1 1 auto; min-height: 0; display: flex; }
.json-out {
  flex: 1 1 auto; width: 100%; min-height: 340px; max-height: 70vh;
  margin: 0; padding: var(--s-4) var(--s-4) var(--s-4) 0;
  background: var(--surface); color: var(--ink);
  font-family: var(--mono); font-size: var(--fs-xs); line-height: 1.6;
  overflow: auto; counter-reset: jline; tab-size: 2;
}
.json-out:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.json-out--plain { padding-left: var(--s-4); white-space: pre; }

.j-line { display: block; white-space: pre; position: relative; padding-left: 4.5em; }
.j-line::before {
  counter-increment: jline; content: counter(jline);
  position: absolute; left: 0; width: 3.6em;
  text-align: right; color: var(--ink-mute); opacity: .65;
  user-select: none; -webkit-user-select: none;
}
.j-line:hover { background: var(--surface-sunken); }

/* --- Colores del resaltado. Tokens, nada escrito a mano --- */
.j-key   { color: var(--accent); }
.j-str   { color: var(--ok); }
.j-num   { color: var(--warn); }
.j-bool  { color: var(--danger); font-weight: var(--fw-medium); }
.j-null  { color: var(--ink-mute); font-style: italic; }

/* --- Vista de árbol --- */
.json-tree {
  flex: 1 1 auto; width: 100%; min-height: 340px; max-height: 70vh;
  padding: var(--s-3) 0; overflow: auto;
  background: var(--surface);
  font-family: var(--mono); font-size: var(--fs-xs); line-height: 1.5;
}
.j-node { min-width: max-content; }
.j-row {
  display: flex; align-items: center; gap: var(--s-1);
  padding-block: 2px; padding-right: var(--s-4);
  white-space: nowrap;
}
.j-row:hover { background: var(--surface-sunken); }
.j-row--hit { background: var(--accent-soft); }
.j-row--hit:hover { background: var(--accent-soft); }

.j-toggle {
  width: 18px; height: 18px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-xs); color: var(--ink-mute);
}
.j-toggle:hover { background: var(--border); color: var(--ink); }
.j-toggle svg { width: 12px; height: 12px; transition: transform var(--dur-fast) var(--ease-out); }
.j-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
.j-toggle--leaf { pointer-events: none; }
.j-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.j-index { color: var(--ink-mute); }
.j-index::before { content: "["; }
.j-index::after { content: "]"; }
.j-colon { color: var(--ink-mute); margin-right: 2px; }
.j-brace { color: var(--ink-mute); }
.j-rootlabel { color: var(--ink-mute); font-style: italic; margin-right: 2px; }
.j-meta { color: var(--ink-mute); font-size: var(--fs-2xs); margin-left: var(--s-2); }
.j-type {
  margin-left: var(--s-2); padding: 0 6px; border-radius: var(--r-full);
  background: var(--surface-sunken); border: 1px solid var(--border);
  color: var(--ink-mute); font-size: var(--fs-2xs);
}
.j-more { margin-block: var(--s-1); }

/* --- Debajo: avisos y radiografía --- */
.json-under { display: grid; gap: var(--s-3); padding: var(--s-4); }
.json-under .notice { margin: 0; }

.json-stats { display: grid; gap: var(--s-3); }
.json-stats__grid {
  display: grid; gap: var(--s-2);
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.json-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s-3);
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-sm);
}
.json-stat__label { font-size: var(--fs-2xs); color: var(--ink-mute); text-transform: uppercase; letter-spacing: .06em; }
.json-stat__value { font-family: var(--mono); font-size: var(--fs-lg); font-weight: var(--fw-medium); color: var(--ink); }
.json-stat__hint { font-size: var(--fs-2xs); color: var(--ink-mute); }
.json-stats__types { font-size: var(--fs-2xs); color: var(--ink-mute); font-family: var(--mono); }

/* --- Soltar un archivo encima --- */
.json-drop .json-split { outline: 2px dashed var(--accent); outline-offset: -4px; }

/* --- Responsive --- */
@media (max-width: 1023px) {
  .json-split { grid-template-columns: 1fr; }
  .json-pane + .json-pane { border-left: 0; border-top: 1px solid var(--border); }
  .json-area, .json-out, .json-tree { min-height: 240px; }
}
@media (max-width: 719px) {
  .json-tools__end { margin-left: 0; width: 100%; }
  .json-count { margin-left: 0; width: 100%; }
}
@media (max-width: 539px) {
  .json-bar, .json-tools, .json-foot { padding-inline: var(--s-3); }
  .json-area { padding: var(--s-3); }
  .json-out { padding-right: var(--s-3); }
  .j-line { padding-left: 3.6em; }
  .j-line::before { width: 2.8em; }
  .json-under { padding: var(--s-3); }
}

/* Alto reservado de la tarjeta mientras el JavaScript la monta. Medido en el
   sitio, no estimado: sin esto la herramienta empuja al aparecer y eso es
   CLS en la primera pantalla. Si la herramienta cambia de tamaño, este
   número hay que volver a medirlo. */
#json-tool { --alto-herramienta: 528px; }