/* =============================================================================
   Utiliobox — estilos propios del comparador de textos.
   Solo tokens de utiliobox.css. Reutiliza check, segmented, notice, textarea y
   btn del sistema compartido; aquí vive únicamente lo de esta herramienta: el
   panel de entrada, la tabla de diferencias y los colores del diff.
   ============================================================================= */

/* --- Cabecera y opciones --- */
.td-head {
  display: flex; align-items: center; gap: var(--s-4) var(--s-5); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
}
.td-opts { display: flex; align-items: center; gap: var(--s-4) var(--s-5); flex-wrap: wrap; }
.td-priv {
  margin-left: auto; display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-2xs); font-weight: var(--fw-medium); color: var(--ok);
}
.td-priv svg { width: 15px; height: 15px; flex: none; }

/* --- Las dos entradas --- */
.td-split { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface-alt); }
.td-pane { display: flex; flex-direction: column; min-width: 0; background: var(--surface); position: relative; }
.td-pane + .td-pane { border-left: 1px solid var(--border); }
.td-pane.is-over::after {
  content: ""; position: absolute; inset: 4px; pointer-events: none;
  border: 2px dashed var(--accent); border-radius: var(--r-sm); background: var(--accent-soft);
}
.td-pane__head {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3) var(--s-2) var(--s-4);
  border-bottom: 1px solid var(--border); min-height: 46px;
}
.td-pane__title { margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--ink-soft); }
.td-pane__name {
  font-family: var(--mono); font-size: var(--fs-2xs); color: var(--ink-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.td-pane__head .td-filebtn { margin-left: auto; flex: none; position: relative; overflow: hidden; cursor: pointer; }
.td-filebtn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }

.td-area {
  flex: 1 1 auto; width: 100%; min-height: 190px; resize: vertical;
  padding: var(--s-3) var(--s-4);
  border: 0; border-radius: 0; background: var(--surface); color: var(--ink);
  font-family: var(--mono); font-size: var(--fs-xs); line-height: 1.6; tab-size: 2;
}
.td-area:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.td-area::placeholder { color: var(--ink-mute); font-family: var(--sans); }
.td-meta {
  margin: 0; padding: var(--s-2) var(--s-4);
  border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: var(--fs-2xs); color: var(--ink-mute); min-height: 30px;
}

.td-actions {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--border); background: var(--surface);
}

/* --- La barra para volver a abrir las entradas --- */
.td-reopen {
  display: flex; align-items: center; gap: var(--s-2); width: 100%;
  padding: var(--s-3) var(--s-4);
  border: 0; border-bottom: 1px solid var(--border);
  background: var(--surface-alt); color: var(--ink-soft);
  font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer;
}
.td-reopen:hover { background: var(--surface-sunken); color: var(--ink); }
.td-reopen svg { width: 16px; height: 16px; flex: none; }

/* --- Barra de resumen --- */
.td-bar {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border); background: var(--surface-alt);
}
.td-sum { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.td-chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 3px var(--s-3); border-radius: var(--r-full);
  font-family: var(--mono); font-size: var(--fs-xs); font-weight: var(--fw-semi);
}
.td-chip span { font-family: var(--sans); font-weight: var(--fw-normal); font-size: var(--fs-2xs); }
.td-chip--add { background: var(--ok-soft); color: var(--ok); }
.td-chip--del { background: var(--danger-soft); color: var(--danger); }
.td-chip--mod { background: var(--warn-soft); color: var(--warn); }

.td-nav { display: flex; align-items: center; gap: var(--s-2); }
.td-navpos { font-family: var(--mono); font-size: var(--fs-2xs); color: var(--ink-mute); min-width: 5ch; text-align: center; }
.td-bar .td-modes { margin-left: auto; }

/* --- La tabla de diferencias ---
   Un solo contenedor con scroll: el desplazamiento sincronizado sale de que
   los dos lados son la misma fila, así que no puede desincronizarse. */
.td-view {
  max-height: 62vh; overflow: auto;
  background: var(--surface);
  font-family: var(--mono); font-size: var(--fs-xs); line-height: 1.65;
}
.td-view:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.td-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.td-num {
  width: 3.6rem; padding: 0 var(--s-2); text-align: right; vertical-align: top;
  color: var(--ink-mute); font-size: var(--fs-2xs);
  user-select: none; -webkit-user-select: none;
  border-right: 1px solid var(--border);
  background: var(--surface-alt);
}
.td-sign { width: 1.6rem; text-align: center; vertical-align: top; color: var(--ink-mute); user-select: none; }
.td-txt {
  padding: 0 var(--s-3); vertical-align: top;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
  color: var(--ink);
}
.td-txt--a { border-right: 1px solid var(--border); }

/* Los colores de siempre: verde lo añadido, rojo lo quitado, ámbar lo tocado */
.td-row--add .td-txt, .td-row--add .td-sign { background: var(--ok-soft); }
.td-row--del .td-txt, .td-row--del .td-sign { background: var(--danger-soft); }
.td-row--mod .td-txt { background: var(--warn-soft); }
.td-row--add .td-num, .td-row--del .td-num, .td-row--mod .td-num { color: var(--ink-soft); }

/* En dos columnas, el hueco del lado que no tiene línea se ve rayado: así se
   entiende que ahí no falta nada, es que no existe. */
.td-view--split .td-row--add .td-txt--a,
.td-view--split .td-row--del .td-txt--b {
  background: repeating-linear-gradient(45deg,
    transparent, transparent 5px, var(--surface-sunken) 5px, var(--surface-sunken) 10px);
}

/* El resaltado por palabra: lo que convierte esto en algo útil */
.td-w { padding: 1px 2px; border-radius: 3px; font-weight: var(--fw-semi); }
.td-w--add { background: var(--ok); color: var(--bg); }
.td-w--del { background: var(--danger); color: var(--bg); }

/* La diferencia a la que has saltado */
.td-row.is-current .td-txt { box-shadow: inset 3px 0 0 var(--accent); }
.td-row.is-current .td-num:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* --- Los tramos sin cambios, plegados --- */
.td-foldrow { border-block: 1px solid var(--border); background: var(--surface-alt); }
.td-fold {
  display: flex; align-items: center; gap: var(--s-2); width: 100%;
  padding: var(--s-2) var(--s-4);
  border: 0; background: none; color: var(--ink-mute);
  font-family: var(--sans); font-size: var(--fs-2xs); cursor: pointer;
}
.td-fold:hover { color: var(--accent); background: var(--surface-sunken); }
.td-fold svg { width: 14px; height: 14px; flex: none; }

#td-note:not(:empty) { padding: var(--s-4); }

/* --- Móvil --- */
@media (max-width: 860px) {
  .td-split { grid-template-columns: 1fr; }
  .td-pane + .td-pane { border-left: 0; border-top: 1px solid var(--border); }
  .td-priv { margin-left: 0; }
  .td-bar .td-modes { margin-left: 0; }
  .td-num { width: 2.6rem; }
  .td-view { font-size: var(--fs-2xs); max-height: 55vh; }
  /* En pantalla estrecha, dos columnas no caben: se enseña la unificada. */
  .td-view--split .td-grid { min-width: 640px; }
  .td-view--split { overflow-x: auto; }
}

/* 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. */
#td-tool { --alto-herramienta: 835px; }