/* =============================================================================
   Utiliobox — estilos propios del convertidor de unidades.
   Solo tokens de utiliobox.css. Reutiliza select, btn, inline-field y la tabla
   de resultados del sistema compartido.
   ============================================================================= */

/* --- Categorías --- */
.uc-cats {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border);
}
.uc-cat {
  padding: var(--s-2) var(--s-3); border-radius: var(--r-full);
  border: 1px solid var(--border-strong); background: var(--surface);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--ink-soft);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.uc-cat:hover { background: var(--surface-sunken); color: var(--ink); }
.uc-cat[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.uc-cat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Los dos campos enfrentados --- */
.uc-pair {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-4);
  align-items: end;
  padding: var(--s-6) var(--s-5) var(--s-5);
}
.uc-side { display: grid; gap: var(--s-2); min-width: 0; }
.uc-field { display: block; }
.uc-input {
  width: 100%; min-height: 64px; padding: var(--s-3) var(--s-4);
  background: var(--surface-alt); color: var(--ink);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  font-family: var(--mono); font-size: var(--fs-2xl); font-weight: var(--fw-medium);
  letter-spacing: -0.02em; text-align: right;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.uc-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--sh-focus); background: var(--surface); }
.uc-select { width: 100%; }

.uc-swap {
  width: 44px; height: 44px; flex: none; margin-bottom: 46px;
  display: grid; place-items: center;
  border-radius: var(--r-full); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--ink-soft);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.uc-swap svg { width: 20px; height: 20px; }
.uc-swap:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); }
.uc-swap:active { transform: rotate(180deg); }
.uc-swap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Debajo: fórmula, precisión y avisos --- */
.uc-under {
  display: grid; gap: var(--s-3);
  padding: var(--s-4) var(--s-5) var(--s-5);
  border-top: 1px solid var(--border);
  background: var(--surface-alt);
}
.uc-formula { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.uc-formula__lbl { font-size: var(--fs-2xs); color: var(--ink-mute); text-transform: uppercase; letter-spacing: .06em; }
.uc-formula code {
  font-family: var(--mono); font-size: var(--fs-sm); color: var(--ink);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 3px var(--s-2);
}
.uc-bar { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.uc-bar .btn { margin-left: auto; }
.uc-note { font-size: var(--fs-2xs); color: var(--ink-mute); line-height: 1.55; }

/* --- Tabla de equivalencias de cada página --- */
.uc-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.uc-table caption {
  text-align: left; font-size: var(--fs-2xs); color: var(--ink-mute);
  padding-bottom: var(--s-2);
}
.uc-table th, .uc-table td {
  padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border); text-align: right;
}
.uc-table th:first-child, .uc-table td:first-child { text-align: left; }
.uc-table thead th {
  font-size: var(--fs-2xs); font-weight: var(--fw-medium); color: var(--ink-mute);
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
}
.uc-table tbody td { font-family: var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.uc-table tbody tr:last-child td { border-bottom: 0; }
.uc-table tbody tr:hover { background: var(--surface-sunken); }
.uc-tablewrap { overflow-x: auto; }

/* --- Lista de todas las unidades --- */
.uc-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--s-2); }
.uc-unit {
  display: flex; align-items: baseline; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: var(--fs-xs);
}
.uc-unit__sym { font-family: var(--mono); color: var(--accent); font-weight: var(--fw-medium); flex: none; }
.uc-unit__name { color: var(--ink-soft); overflow-wrap: anywhere; }

/* --- Tarjetas de categoría del índice --- */
/* Reutilizan .tool-card del sistema compartido; solo se aprietan, porque no
   llevan icono ni enlace de pie. */
.uc-catgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.uc-catgrid .tool-card { gap: var(--s-1); }

/* --- Enlaces a las demás categorías --- */
.uc-others { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.uc-other {
  padding: var(--s-2) var(--s-3); border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--border-strong);
  font-size: var(--fs-xs); color: var(--ink-soft);
}
.uc-other:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); }

/* --- Responsive --- */
@media (max-width: 719px) {
  .uc-pair { grid-template-columns: 1fr; gap: var(--s-3); padding: var(--s-4); }
  .uc-swap { margin: 0 auto; transform: rotate(90deg); }
  .uc-swap:active { transform: rotate(270deg); }
  .uc-cats, .uc-under { padding-inline: var(--s-4); }
  .uc-input { font-size: var(--fs-xl); min-height: 56px; }
}
@media (max-width: 539px) {
  .uc-cats, .uc-under, .uc-pair { padding-inline: var(--s-3); }
  .uc-cat { padding: 6px 10px; font-size: var(--fs-2xs); }
  .uc-bar .btn { margin-left: 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. */
#uc-tool { --alto-herramienta: 340px; }