/* =============================================================================
   Utiliobox — estilos propios del compresor de imágenes.
   Solo usa tokens de utiliobox.css: ningún color ni tamaño escrito a mano.
   Reutiliza los componentes compartidos (dropzone, segmented, slider, notice,
   table, btn); aquí solo va la maquetación que esta herramienta necesita.
   ============================================================================= */

.img-tool { overflow: hidden; }
.img-head { display: flex; flex-direction: column; gap: var(--s-3); }
.img-mode { align-self: start; }

/* --- Panel de opciones --- */
.img-opts {
  padding: var(--s-5);
  border-top: 1px solid var(--border);
  background: var(--surface-alt);
  display: flex; flex-direction: column; gap: var(--s-5);
}
.img-heic-note { margin: 0; }
.img-fields {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  align-items: start;
}
.img-fields .check { margin-bottom: var(--s-1); }
.img-fields .field > .input { margin-top: var(--s-1); }
.img-rename { display: grid; grid-template-columns: 1fr 84px; gap: var(--s-2); margin-top: var(--s-1); }

/* --- El número grande: es lo que la gente comparte --- */
.img-results { padding: var(--s-5); border-top: 1px solid var(--border); }
.img-total {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4);
  padding: var(--s-5) var(--s-6);
  border-radius: var(--r-lg);
  background: var(--ok-soft);
  border: 1px solid color-mix(in srgb, var(--ok) 25%, transparent);
  margin-bottom: var(--s-5);
}
.img-total__num {
  font-size: clamp(2.6rem, 1.6rem + 4.4vw, 4.2rem);
  font-weight: var(--fw-bold);
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--ok);
  font-variant-numeric: tabular-nums;
}
.img-total__meta { display: flex; flex-direction: column; gap: 2px; }
.img-total__word {
  font-family: var(--mono); font-size: var(--fs-xs); font-weight: var(--fw-medium);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ok);
}
.img-total__sizes { font-size: var(--fs-base); color: var(--ink-soft); }
.img-total--flat { background: var(--surface-alt); border-color: var(--border); }
.img-total--flat .img-total__num,
.img-total--flat .img-total__word { color: var(--ink-mute); }
.img-flat-note { font-size: var(--fs-sm); color: var(--ink-mute); margin-bottom: var(--s-4); }

.img-dims { font-family: var(--mono); font-size: var(--fs-2xs); color: var(--ink-mute); }
.img-actions { margin-top: var(--s-5); }

/* --- Comparador antes / después --- */
.img-cmp { padding: var(--s-5); border-top: 1px solid var(--border); }
.img-cmp__head {
  display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-start;
  justify-content: space-between; margin-bottom: var(--s-4);
}
.img-cmp__hint { font-size: var(--fs-xs); color: var(--ink-mute); margin-top: 2px; max-width: 60ch; }
.img-cmp__name { font-size: var(--fs-xs); color: var(--ink-mute); }

.img-cmp__stage {
  position: relative; width: 100%; overflow: hidden;
  border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--surface-sunken);
  aspect-ratio: var(--ar, 1.5);
  max-height: 62vh;
  cursor: ew-resize; touch-action: none; user-select: none;
}
.img-cmp__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
  pointer-events: none; -webkit-user-drag: none;
}
.img-cmp__after { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }
.img-cmp__tag {
  position: absolute; bottom: var(--s-3); z-index: 2;
  padding: var(--s-1) var(--s-3); border-radius: var(--r-full);
  font-family: var(--mono); font-size: var(--fs-2xs);
  background: var(--surface); color: var(--ink-soft);
  border: 1px solid var(--border); box-shadow: var(--sh-sm);
  pointer-events: none;
}
.img-cmp__tag--l { left: var(--s-3); }
.img-cmp__tag--r { right: var(--s-3); }
.img-cmp__handle {
  position: absolute; top: 0; bottom: 0; left: 50%; z-index: 3;
  width: 2px; margin-left: -1px; background: var(--accent);
  pointer-events: none;
}
.img-cmp__handle span {
  position: absolute; top: 50%; left: 50%;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: var(--r-full); background: var(--accent);
  border: 3px solid var(--surface); box-shadow: var(--sh-md);
}
.img-cmp__handle span::before,
.img-cmp__handle span::after {
  content: ""; position: absolute; top: 50%; width: 0; height: 0;
  border-block: 4px solid transparent;
}
.img-cmp__handle span::before {
  left: 5px; margin-top: -4px; border-right: 5px solid var(--accent-ink);
}
.img-cmp__handle span::after {
  right: 5px; margin-top: -4px; border-left: 5px solid var(--accent-ink);
}
.img-cmp__range { margin-top: var(--s-3); }

@media (max-width: 539px) {
  .img-opts, .img-results, .img-cmp { padding-inline: var(--s-4); }
  .img-total { padding: var(--s-4); }
  .img-cmp__stage { max-height: 48vh; }
}

@media (prefers-reduced-motion: reduce) {
  .img-cmp__stage { scroll-behavior: 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. */
#img-tool { --alto-herramienta: 390px; }