/* =============================================================================
   Utiliobox — estilos propios del codificador de URL.
   Solo tokens de utiliobox.css. Reutiliza tabs, segmented, notice, field,
   input, check, btn y btn-row del sistema compartido; aquí vive únicamente lo
   de esta herramienta.
   ============================================================================= */

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

.ue-panel > .ue-intro {
  margin: 0; padding: var(--s-4) var(--s-4) 0;
  font-size: var(--fs-xs); color: var(--ink-soft);
}
.ue-h3 { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--ink); }

/* --- Opciones --- */
.ue-opts {
  display: flex; align-items: center; gap: var(--s-3) var(--s-5); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
}

/* --- El ejemplo que explica los dos modos --- */
.ue-ej {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border); background: var(--surface-alt);
  font-size: var(--fs-2xs);
}
.ue-ej code {
  font-family: var(--mono); font-size: var(--fs-2xs);
  overflow-wrap: anywhere; background: none; padding: 0;
}
.ue-ej__src { margin: 0 0 var(--s-2); display: flex; gap: var(--s-2); align-items: baseline; flex-wrap: wrap; }
.ue-ej__src code { color: var(--ink); }
.ue-ej__filas { display: grid; gap: var(--s-1); }
.ue-ej__fila {
  margin: 0; display: flex; gap: var(--s-2); align-items: baseline; flex-wrap: wrap;
  padding: var(--s-1) var(--s-2); border-radius: var(--r-xs);
  color: var(--ink-mute); transition: background var(--dur-fast) var(--ease-out);
}
.ue-ej__fila.is-on { background: var(--accent-soft); color: var(--ink-soft); }
.ue-ej__fila.is-on code { color: var(--accent); font-weight: var(--fw-medium); }
.ue-ej__lbl {
  flex: none; min-width: 8.5em;
  font-weight: var(--fw-semi); color: var(--ink-soft);
  font-size: var(--fs-2xs);
}
/* --ink-soft: el apagado sobre este fondo se queda en 4,02. Medido. */
.ue-ej__why { color: var(--ink-soft); font-size: var(--fs-2xs); }

/* --- Panel dividido de codificar --- */
.ue-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); }
.ue-side { display: flex; flex-direction: column; min-width: 0; background: var(--surface); }
.ue-side__head {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  border-bottom: 1px solid var(--border); min-height: 44px;
}
.ue-side__title { margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--ink-soft); }
.ue-side__acts { margin-left: auto; flex: none; }
.ue-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.65;
  overflow-wrap: anywhere;
}
.ue-area:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.ue-area::placeholder { color: var(--ink-mute); font-family: var(--sans); }
.ue-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;
}
.ue-avisos:not(:empty) { padding: var(--s-3) var(--s-4) 0; display: grid; gap: var(--s-2); }
.ue-avisos code { font-family: var(--mono); font-size: .92em; overflow-wrap: anywhere; }
.ue-bar {
  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-alt);
}

/* --- Entrada de una dirección --- */
.ue-inbar {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-4) var(--s-4) var(--s-3);
}
.ue-inbar .input { flex: 1 1 auto; min-width: 0; }
.ue-inbar .btn { flex: none; }

/* --- Las partes de la dirección --- */
.ue-partes:not(:empty) {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
}
.ue-parte {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-alt);
}
.ue-parte--soft { opacity: .72; border-style: dashed; }
/* --ink-soft y no --ink-mute: en claro, el apagado sobre el fondo de la
   tarjeta se queda en 4,29 de contraste. Medido. */
.ue-parte__k {
  font-size: var(--fs-2xs); font-weight: var(--fw-semi); color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .06em;
}
.ue-parte__v {
  font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink);
  overflow-wrap: anywhere; background: none; padding: 0;
}
.ue-parte__alt { font-size: var(--fs-2xs); color: var(--accent); overflow-wrap: anywhere; }

/* --- Tabla editable de parámetros --- */
.ue-params { padding: var(--s-3) var(--s-4) 0; }
.ue-params__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-2);
}
.ue-tabla-caja { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-sm); }
.ue-tabla { width: 100%; min-width: 420px; border-collapse: collapse; }
.ue-tabla th {
  padding: var(--s-2) var(--s-3); text-align: left;
  background: var(--surface-alt); border-bottom: 1px solid var(--border);
  font-size: var(--fs-2xs); font-weight: var(--fw-semi); color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .06em;
}
.ue-tabla td { padding: var(--s-1) var(--s-2); border-bottom: 1px solid var(--border); vertical-align: middle; }
.ue-tabla tr:last-child td { border-bottom: 0; }
.ue-tabla th:first-child, .ue-tabla td:first-child { width: 32%; }
.ue-td-x { width: 40px; text-align: center; }
.ue-fila.is-doble .ue-v { border-color: var(--warn); }
.ue-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: none; color: var(--ink-mute); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.ue-x:hover { background: var(--danger-soft); color: var(--danger); }
.ue-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ue-x svg { width: 15px; height: 15px; }

/* --- La dirección reconstruida --- */
.ue-result { padding: var(--s-4); }
.ue-result__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-2);
}
.ue-out {
  width: 100%; min-height: 76px; resize: vertical;
  font-family: var(--mono); font-size: var(--fs-xs); line-height: 1.6;
  overflow-wrap: anywhere;
}
.ue-result .ue-meta, .ue-utm__out .ue-meta { padding: var(--s-2) 0 0; border-top: 0; }

/* --- Enlaces de campaña --- */
.ue-utm {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-5); padding: var(--s-4);
}
.ue-utm__form { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
.ue-utm__out { display: grid; gap: var(--s-3); align-content: start; min-width: 0; }
.ue-campos { display: grid; gap: var(--s-3); }
.ue-req { color: var(--danger); font-weight: var(--fw-bold); }
.ue-normal { margin-top: calc(var(--s-1) * -1); }
.ue-presets { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.ue-preset {
  padding: var(--s-1) var(--s-3); min-height: 30px;
  border: 1px solid var(--border); border-radius: var(--r-full);
  background: var(--surface); color: var(--ink-soft);
  font-family: var(--sans); font-size: var(--fs-2xs); font-weight: var(--fw-medium);
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.ue-preset:hover { border-color: var(--border-strong); color: var(--ink); }
.ue-preset.is-on { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent); }
.ue-preset:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.ue-qr { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.ue-qr__lienzo {
  flex: none; min-width: 0; line-height: 0;
  border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden;
  background: #fff;
}
.ue-qr__lienzo:empty { display: none; }
.ue-qr__lienzo canvas, .ue-qr__lienzo svg { display: block; max-width: 100%; height: auto; }
.ue-qr__lado { display: grid; gap: var(--s-2); align-content: center; min-width: 0; }
.ue-qr__txt { margin: 0; font-size: var(--fs-2xs); color: var(--ink-mute); max-width: 24ch; }
.ue-qr__err { margin: 0; font-size: var(--fs-2xs); color: var(--danger); }

/* --- Ver qué lleva dentro --- */
.ue-dentro { padding: 0 var(--s-4) var(--s-4); }
.ue-dentro:empty { padding: 0; }
.ue-nivel__head {
  display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap;
  padding-bottom: var(--s-2); margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--border);
}
.ue-nivel__host {
  font-family: var(--mono); font-size: var(--fs-xs); font-weight: var(--fw-semi);
  color: var(--ink); overflow-wrap: anywhere; background: none; padding: 0;
}
.ue-nivel__alt { font-size: var(--fs-2xs); color: var(--warn); }
.ue-nivel__riesgo {
  font-size: var(--fs-2xs); color: var(--danger); font-weight: var(--fw-semi);
}
.ue-nivel--hijo {
  margin: var(--s-2) 0 var(--s-3) var(--s-4);
  padding: var(--s-3);
  border-left: 3px solid var(--accent-border); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--surface-alt);
}
.ue-kv {
  display: grid; grid-template-columns: minmax(7em, 22%) minmax(0, 1fr);
  gap: var(--s-2) var(--s-3); align-items: baseline;
  padding: var(--s-1) 0; border-bottom: 1px solid var(--border);
}
.ue-kv:last-child { border-bottom: 0; }
.ue-kv__k {
  font-family: var(--mono); font-size: var(--fs-2xs); font-weight: var(--fw-semi);
  color: var(--ink-soft); overflow-wrap: anywhere;
}
.ue-kv__v { font-size: var(--fs-xs); color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.ue-kv__v code { font-family: var(--mono); font-size: var(--fs-2xs); background: none; padding: 0; }
.ue-marca {
  display: inline-block; margin-left: var(--s-2);
  padding: 1px var(--s-2); border-radius: var(--r-full);
  background: var(--ok-soft); color: var(--ok);
  font-size: 10px; font-weight: var(--fw-semi); text-transform: uppercase; letter-spacing: .05em;
  vertical-align: 1px;
}
.ue-marca--warn { background: var(--warn-soft); color: var(--warn); }
.ue-dim { color: var(--ink-mute); font-style: italic; font-size: var(--fs-2xs); }
.ue-corte {
  margin: var(--s-2) 0 var(--s-3) var(--s-4);
  padding: var(--s-2) var(--s-3);
  border-left: 3px dashed var(--border-strong); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--surface-alt);
  font-size: var(--fs-2xs); color: var(--ink-mute);
}
.ue-corte code { font-family: var(--mono); overflow-wrap: anywhere; background: none; padding: 0; }

/* =============================================================================
   Tabla de caracteres de la parte de contenido (indexable, sin JavaScript)
   ============================================================================= */
.ue-ref { overflow-x: auto; margin: var(--s-5) 0; }
.ue-ref table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: var(--fs-xs); }
.ue-ref th, .ue-ref td {
  padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border);
  text-align: left; vertical-align: top;
}
.ue-ref thead th {
  background: var(--surface-alt); font-weight: var(--fw-semi);
  color: var(--ink-soft); white-space: nowrap;
}
.ue-ref tbody th { font-weight: var(--fw-medium); color: var(--ink); white-space: nowrap; }
.ue-ref code { font-family: var(--mono); font-size: .92em; overflow-wrap: anywhere; }
.ue-ref td:last-child { color: var(--ink-soft); }
.ue-ref tr:last-child th, .ue-ref tr:last-child td { border-bottom: 0; }
.ue-ref .ue-no { color: var(--ink-mute); }
.ue-refhead {
  margin: var(--s-6) 0 var(--s-2);
  font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--ink);
}
.ue-refhead:first-of-type { margin-top: var(--s-4); }

/* =============================================================================
   Móvil
   ============================================================================= */
@media (max-width: 860px) {
  .ue-split { grid-template-columns: 1fr; }
  .ue-utm { grid-template-columns: 1fr; gap: var(--s-4); }
  .ue-area { min-height: 150px; }
  .ue-head { padding: 0 var(--s-3); }
  .ue-ej__lbl { min-width: 0; }
  .ue-ej__why { flex-basis: 100%; }
  .ue-kv { grid-template-columns: 1fr; gap: 2px; }
  .ue-nivel--hijo, .ue-corte { margin-left: var(--s-2); }
}

/* -----------------------------------------------------------------------------
   Esta página escribe direcciones codificadas enteras dentro del texto, y una
   de ellas son 506 px seguidos sin un solo hueco donde partir: en un móvil de
   375 px eso desplazaba la PÁGINA a lo ancho. Solo afecta a estas dos páginas,
   que son las que cargan esta hoja.
   ----------------------------------------------------------------------------- */
.prose code, .faq__answer code, .usecases code { overflow-wrap: anywhere; }

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