/* [ZSPORT-hexcmp] v3.1. Visor / comparador / editor hexadecimal.
   PC: paneles A y B lado a lado, minimapa, herramientas arriba del hex.
   Celular: A y B intercalados en un solo panel, 8 bytes por fila, el hex justo
   abajo de la navegacion y los controles en grilla de 2 columnas para el dedo.
   Letras hex en verde, diferencias con fondo rojo, editado con fondo ambar. */

/* --- orden de la pantalla (el celular reordena, no esconde) --- */
.hx-cuerpo { display: flex; flex-direction: column; gap: 10px; }
.hx-o-archivos { order: 1; }
.hx-o-nav { order: 2; }
.hx-o-herr { order: 3; }
.hx-o-panes { order: 4; }
.hx-o-info { order: 5; }
.hx-o-ley { order: 6; }

/* --- carga: una linea por archivo --- */
.hx-drop {
  border: 1px dashed var(--borde, #3a3f46);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  background: var(--fondo2, rgba(255, 255, 255, .02));
  transition: border-color .12s, background .12s;
  display: flex; align-items: center; gap: 10px;
}
.hx-drop:hover { border-color: var(--acento, #ff6a00); }
.hx-drop.over { border-color: var(--acento, #ff6a00); background: rgba(255, 106, 0, .08); }
.hx-drop.cargado { border-style: solid; }
.hx-droptit { font-weight: 600; white-space: nowrap; }
.hx-finfo { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- barras de herramientas en filas --- */
.hx-toolbar { display: flex; flex-direction: column; gap: 2px; }
.hx-tbfila {
  display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center;
  padding: 5px 0; border-bottom: 1px solid var(--borde, rgba(255, 255, 255, .07));
}
.hx-tbfila:last-child { border-bottom: none; }
.hx-tbtit {
  width: 58px; flex: 0 0 58px;
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--t3, #8a919c);
}
.hx-campo { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--t2, #aeb4bd); margin: 0; }
.hx-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; margin: 0; cursor: pointer; }
.hx-chk input { width: auto; margin: 0; }
.hx-sep { width: 1px; height: 20px; background: var(--borde, rgba(255, 255, 255, .12)); margin: 0 2px; }
.hx-toolbar input[type=text] { width: 110px; height: 28px; padding: 2px 7px; font-size: 12.5px; }
.hx-toolbar select { width: auto; min-width: 62px; height: 28px; padding: 2px 26px 2px 8px; font-size: 12.5px; }
.hx-resumen { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.hx-sugerido { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* --- paneles + minimapa --- */
.hx-panes { display: flex; gap: 8px; align-items: flex-start; --hx-lh: 20px; --hx-ih: 20px; }
.hx-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.hx-colhead {
  font-weight: 600;
  padding: 6px 10px;
  border: 1px solid var(--borde, #3a3f46);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: var(--fondo2, rgba(255, 255, 255, .03));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hx-hnom { margin: 0 14px 0 4px; font-weight: 600; }
.hx-scroll {
  height: 60vh; min-height: 300px;
  overflow: auto;
  border: 1px solid var(--borde, #3a3f46);
  border-radius: 0 0 8px 8px;
  background: var(--fondo, #0e1013);
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, "Liberation Mono", monospace;
  font-size: 12.5px;
  -webkit-overflow-scrolling: touch;
}
.hx-spacer { position: relative; }
.hx-layer { position: absolute; top: 0; left: 0; right: 0; will-change: transform; }
.hx-miniwrap { flex: 0 0 14px; }
.hx-mini { display: block; width: 14px; border-radius: 3px; cursor: pointer; }

.hrow { height: var(--hx-lh); line-height: var(--hx-lh); white-space: pre; padding: 0 10px; }
/* intercalado: cada item son dos renglones, A arriba y B abajo */
.hrow2 { height: calc(var(--hx-lh) * 2); line-height: normal; padding: 0; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .05); }
.hrow2 .hl { height: var(--hx-lh); line-height: var(--hx-lh); white-space: pre; padding: 0 10px; }
.hrow2.hrow-dif { box-shadow: inset 3px 0 0 rgba(239, 68, 68, .9), inset 0 -1px 0 rgba(255, 255, 255, .05); }
.htag { display: inline-block; width: 1.5em; font-weight: 700; }
.htag-a { color: #60a5fa; }
.htag-b { color: #fb923c; }
.hgap {
  height: var(--hx-ih); line-height: var(--hx-ih);
  color: var(--t3, #8a919c); font-style: italic; text-align: center;
  background: rgba(255, 255, 255, .035);
}
.hoff { color: var(--t3, #8a919c); margin-right: 12px; }
.hhex { color: #35d07f; }                                  /* letras hex en verde */
.hb { border-radius: 2px; }
.hb.pad { color: transparent; }
.hasc { margin-left: 12px; color: var(--t3, #8a919c); }   /* ascii atenuado */
.ha { border-radius: 2px; }

/* diferencias: fondo rojo fuerte; el byte en blanco y negrita */
.d { background: rgba(239, 68, 68, .85); }
.hb.d { color: #fff; font-weight: 700; }
.ha.d { color: #fff; }
/* byte editado en esta sesion: fondo ambar */
.e { background: rgba(245, 158, 11, .6); }
.hb.e { color: #1a1a1a; font-weight: 700; }
/* coincidencia de la busqueda: amarillo */
.hb.hit, .ha.hit { background: rgba(250, 204, 21, .92); color: #111; font-weight: 700; }
/* rango elegido: anillo celeste por dentro */
.sel { box-shadow: inset 0 0 0 1px #60a5fa; }
.hb.sel:not(.d):not(.e):not(.hit), .ha.sel:not(.d):not(.e):not(.hit) { background: rgba(96, 165, 250, .22); }
/* diferencia actual: anillo naranja */
.cur { box-shadow: 0 0 0 2px var(--acento, #ff6a00); }
/* byte que muestra el inspector */
.hb.insp { outline: 1px dashed #fff; outline-offset: -1px; }
/* filas con alguna diferencia: barra roja a la izquierda + tinte */
.hrow-dif { background: rgba(239, 68, 68, .09); box-shadow: inset 3px 0 0 rgba(239, 68, 68, .9); }

.hx-panes .hb:not(.pad) { cursor: pointer; }
.hx-panes.editando .hb:not(.pad):hover { outline: 1px solid var(--acento, #ff6a00); }

.hx-in {
  width: 2.4em; font-family: inherit; font-size: inherit;
  padding: 0 1px; margin: 0; border: 1px solid var(--acento, #ff6a00);
  background: var(--fondo, #0e1013); color: var(--texto, #e7eaee);
  text-transform: uppercase;
}

/* --- lista de diferencias e inspector --- */
.hx-tabla { width: 100%; border-collapse: collapse; font-size: 12px; }
.hx-tabla th, .hx-tabla td { padding: 3px 7px; text-align: left; border-bottom: 1px solid var(--borde, rgba(255, 255, 255, .07)); white-space: nowrap; }
.hx-tabla th { color: var(--t3, #8a919c); font-weight: 600; position: sticky; top: 0; background: var(--panel, #15181d); }
.hx-tabla td.mono { font-family: ui-monospace, Consolas, monospace; }
.hx-listascroll { max-height: 290px; overflow: auto; }
.hx-tablascroll { overflow-x: auto; }
.hx-tlista tbody tr { cursor: pointer; }
.hx-tlista tbody tr:hover { background: rgba(255, 255, 255, .05); }
.hx-tlista tbody tr.actual { background: rgba(255, 106, 0, .2); }
.hx-tinsp tr.dif td { color: #fca5a5; font-weight: 600; }

/* muestras de color de la leyenda */
.hx-leg { display: inline-block; width: 18px; border-radius: 2px; vertical-align: middle; }

/* ================= celular ================= */
@media (max-width: 760px) {
  /* el hex sube: archivos, navegacion, HEX, y despues las herramientas */
  .hx-o-panes { order: 3; }
  .hx-o-herr { order: 4; }

  .hx-panes { flex-direction: column; align-items: stretch; }
  .hx-col { flex: 0 0 auto; width: 100%; }
  .hx-miniwrap { display: none !important; }
  .hx-scroll { height: 62vh; min-height: 260px; font-size: 11.5px; }
  .hrow, .hrow2 .hl { padding: 0 6px; }
  .hoff { margin-right: 8px; }
  .hasc { margin-left: 8px; }
  .hx-colhead { padding: 8px 10px; }

  /* controles: grilla de 2 columnas, del mismo tamano y aptos para el dedo */
  .hx-tbfila { gap: 8px; padding: 10px 0; }
  .hx-tbtit { flex: 1 1 100%; width: auto; }
  .hx-tbfila > *:not(.hx-tbtit):not(.hx-sep) { flex: 1 1 calc(50% - 8px); min-width: 0; }
  .hx-toolbar .hx-tbfila > .hx-info,
  .hx-toolbar .hx-tbfila > input[type=text] { flex-basis: 100%; }
  .hx-info:empty { display: none; }
  .hx-sep { display: none; }
  .hx-campo { flex-direction: column; align-items: stretch; gap: 3px; }
  .hx-toolbar input[type=text], .hx-toolbar select { width: 100%; height: 40px; font-size: 16px; }
  .hx-toolbar .btn { min-height: 40px; width: 100%; }
  .hx-chk { min-height: 40px; }
  .hx-chk input { width: 20px; height: 20px; }
  .hx-drop { padding: 10px 12px; flex-wrap: wrap; }
  .hx-drop .btn { min-height: 36px; }
  .hx-resumen { font-size: 12.5px; }
  .hx-listascroll { max-height: 240px; }
}