/* =============================================================================
   Utiliobox — estilos propios del generador de hashes.
   Solo tokens de utiliobox.css. Reutiliza tabs, segmented, check, notice,
   dropzone, progress, field, input y btn del sistema compartido; aquí solo vive
   lo de esta herramienta: las filas de resultado y el veredicto del comparador.
   ============================================================================= */

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

/* --- Opciones de salida --- */
.hs-opts {
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
}

/* --- Áreas de texto --- */
.hs-panel { padding: 0; }
.hs-area {
  width: 100%; min-height: 150px; resize: vertical;
  padding: var(--s-4);
  border: 0; border-radius: 0; background: var(--surface); color: var(--ink);
  font-size: var(--fs-base); line-height: 1.6;
}
.hs-area:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.hs-area--sm { min-height: 96px; border: 1px solid var(--border); border-radius: var(--r-sm); }
.hs-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;
}

/* --- Las filas de resultado --- */
.hs-results:not(:empty) { padding: var(--s-4); display: grid; gap: var(--s-2); }
.hs-row {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto;
  align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-alt);
}
.hs-row__name {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--ink-soft);
}
.hs-tag {
  padding: 1px 6px; border-radius: var(--r-full);
  background: var(--warn-soft); color: var(--warn);
  font-size: var(--fs-2xs); font-weight: var(--fw-medium); cursor: help;
}
.hs-row__val {
  font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink);
  overflow-wrap: anywhere; word-break: break-all; line-height: 1.55;
}
.hs-copy { flex: none; }

/* El resultado que el comparador ha confirmado, o desmentido */
.hs-row.is-match { border-color: var(--ok); background: var(--ok-soft); }
.hs-row.is-match .hs-row__val { color: var(--ok); font-weight: var(--fw-semi); }
.hs-row.is-miss { border-color: var(--danger); background: var(--danger-soft); }
.hs-row.is-miss .hs-row__val { color: var(--danger); }

/* --- Pestaña de archivo --- */
.hs-panel[data-panel="file"], .hs-panel[data-panel="hmac"] { padding: var(--s-4); }
.hs-algos {
  display: flex; align-items: center; gap: var(--s-3) var(--s-4); flex-wrap: wrap;
  margin-bottom: var(--s-4);
}
.hs-algos__label { font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--ink-soft); }
.hs-panel[data-panel="file"] .hs-results:not(:empty) { padding: var(--s-4) 0 0; }

.hs-fileinfo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-alt);
}
.hs-fi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hs-fi__k { font-size: var(--fs-2xs); color: var(--ink-mute); text-transform: uppercase; letter-spacing: .04em; }
.hs-fi__v { font-size: var(--fs-sm); color: var(--ink); overflow-wrap: anywhere; }
.hs-panel[data-panel="file"] .progress { margin-top: var(--s-4); }

/* --- El comparador --- */
.hs-verify { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--border); }
.hs-legend {
  display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap;
  margin: 0 0 var(--s-3);
  font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .05em;
}
.hs-legend__hint {
  font-size: var(--fs-2xs); font-weight: var(--fw-normal); color: var(--ink-mute);
  text-transform: none; letter-spacing: 0;
}
.hs-verifyrow { margin-bottom: var(--s-3); }
.hs-verifyrow .input { width: 100%; }
.hs-cmp {
  margin: var(--s-3) 0 0; padding: var(--s-3);
  border-radius: var(--r-xs); background: var(--surface-sunken);
  font-family: var(--mono); font-size: var(--fs-2xs); line-height: 1.7;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.hs-cmp__k { display: inline-block; min-width: 7.5rem; color: var(--ink-mute); }

/* --- HMAC --- */
.hs-intro { margin: 0 0 var(--s-4); font-size: var(--fs-sm); color: var(--ink-soft); }
.hs-hmacrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-bottom: var(--s-3); }
.hs-panel[data-panel="hmac"] .field { margin-bottom: var(--s-3); }
.hs-panel[data-panel="hmac"] .hs-results:not(:empty) { padding: var(--s-3) 0 0; }
#hs-hmac-note:not(:empty) { margin-bottom: var(--s-3); }

/* --- Móvil --- */
@media (max-width: 720px) {
  .hs-row { grid-template-columns: 1fr; gap: var(--s-2); }
  .hs-copy { justify-self: start; }
  .hs-hmacrow { grid-template-columns: 1fr; }
  .hs-cmp__k { display: block; min-width: 0; }
}

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