/* =============================================================================
   Utiliobox — estilos propios del probador de expresiones regulares.
   Solo tokens de utiliobox.css. Reutiliza tabs, notice, table, field, input,
   select e inline-field del sistema compartido; aquí vive lo de esta
   herramienta: el campo de la expresión con sus barras, la capa de resaltado
   y el desglose de la explicación.
   ============================================================================= */

/* --- Cabecera: la expresión y sus banderas --- */
.rx-head { padding: var(--s-4); border-bottom: 1px solid var(--border); background: var(--surface-alt); }
.rx-pat {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface);
}
.rx-pat:focus-within { border-color: var(--accent); box-shadow: var(--sh-focus); }
.rx-slash { color: var(--ink-mute); font-family: var(--mono); font-size: var(--fs-lg); user-select: none; }
.rx-input {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: none; padding: var(--s-1) 0;
  font-size: var(--fs-sm);
}
.rx-input:focus { outline: none; box-shadow: none; }

.rx-flags { display: flex; gap: 3px; flex: none; }
.rx-flag {
  width: 26px; height: 26px; padding: 0;
  border: 1px solid var(--border); border-radius: var(--r-xs);
  background: var(--surface-alt); color: var(--ink-mute);
  font-family: var(--mono); font-size: var(--fs-xs); font-weight: var(--fw-semi);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.rx-flag:hover { color: var(--ink); border-color: var(--border-strong); }
.rx-flag[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--ink-invert); }
.rx-flag:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.rx-headrow {
  display: flex; align-items: center; gap: var(--s-3) var(--s-4); flex-wrap: wrap;
  margin-top: var(--s-3);
}
/* Un <select> se dimensiona por su opción más larga, y «Fecha DD/MM/AAAA con
   grupos con nombre» empujaba la página entera fuera de la pantalla en el
   móvil. Hay que dejarle encoger explícitamente. */
.rx-headrow .inline-field { flex: 1 1 12rem; min-width: 0; }
.rx-headrow .select { min-width: 0; max-width: 100%; }
.rx-engine, .rx-priv { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-2xs); }
.rx-engine { color: var(--ink-mute); }
.rx-priv { margin-left: auto; color: var(--ok); font-weight: var(--fw-medium); }
.rx-engine svg, .rx-priv svg { width: 15px; height: 15px; flex: none; }

#rx-note:not(:empty) { padding: var(--s-4) var(--s-4) 0; }
.rx-code {
  padding: 1px 5px; border-radius: var(--r-xs);
  background: var(--surface-sunken); font-family: var(--mono); font-size: .92em;
}

/* --- El texto de prueba, con la capa de resaltado detrás ---
   Las dos capas comparten TODAS las métricas: tipografía, tamaño, interlineado,
   relleno y modo de ajuste. Si una sola difiere, el resaltado se desplaza. */
.rx-editor { position: relative; margin: var(--s-4); }
.rx-hl, .rx-text {
  margin: 0;
  padding: var(--s-3);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  font-family: var(--mono); font-size: var(--fs-xs); line-height: 1.7;
  white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word;
  tab-size: 2;
}
.rx-hl {
  position: absolute; inset: 0;
  overflow: auto; pointer-events: none;
  color: transparent;
  background: var(--surface);
}
.rx-text {
  position: relative; display: block; width: 100%;
  min-height: 190px; resize: vertical;
  background: transparent; color: var(--ink);
  caret-color: var(--accent);
}
.rx-text:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.rx-text::placeholder { color: var(--ink-mute); }

.rx-m { background: var(--accent-soft); color: transparent; border-radius: 2px; box-shadow: 0 0 0 1px var(--accent-border); }
.rx-m--empty { box-shadow: -1px 0 0 1px var(--accent); border-radius: 0; }

.rx-meta {
  margin: 0 var(--s-4) var(--s-3);
  font-family: var(--mono); font-size: var(--fs-2xs); color: var(--ink-mute); min-height: 18px;
}

/* --- Pestañas y paneles --- */
.rx-tabs { padding: 0 var(--s-4); border-bottom: 1px solid var(--border); }
.rx-tabs .tabs { border-bottom: 0; margin: 0; }
.rx-panel { padding: var(--s-4); }
.rx-empty { margin: 0; padding: var(--s-4) 0; color: var(--ink-mute); font-size: var(--fs-sm); text-align: center; }
.rx-hint { margin: var(--s-3) 0 0; font-size: var(--fs-2xs); color: var(--ink-mute); }

/* --- Tabla de coincidencias --- */
.rx-table td, .rx-table th { vertical-align: top; }
.rx-t__n { width: 3rem; color: var(--ink-mute); font-family: var(--mono); font-size: var(--fs-2xs); }
.rx-t__pos { width: 7rem; color: var(--ink-mute); font-family: var(--mono); font-size: var(--fs-2xs); white-space: nowrap; }
.rx-t__val code { font-family: var(--mono); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.rx-t__g { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.rx-g {
  display: inline-flex; align-items: stretch; border-radius: var(--r-xs); overflow: hidden;
  border: 1px solid var(--border); font-size: var(--fs-2xs);
}
.rx-g__n { padding: 2px 6px; background: var(--surface-sunken); color: var(--ink-soft); font-family: var(--mono); }
.rx-g__v { padding: 2px 7px; background: var(--surface); font-family: var(--mono); overflow-wrap: anywhere; }
.rx-undef { color: var(--ink-mute); font-style: italic; }

/* --- El desglose de la explicación --- */
.rx-explain { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.rx-x {
  display: grid; grid-template-columns: minmax(3.5rem, auto) 1fr;
  gap: var(--s-3); align-items: baseline;
  padding: var(--s-2) var(--s-3);
  margin-left: calc(var(--d, 0) * var(--s-4));
  border: 1px solid var(--border); border-left-width: 2px;
  background: var(--surface); border-radius: 0 var(--r-xs) var(--r-xs) 0;
}
.rx-x__src {
  font-family: var(--mono); font-size: var(--fs-xs); font-weight: var(--fw-semi);
  color: var(--accent); overflow-wrap: anywhere;
}
.rx-x__txt { font-size: var(--fs-sm); color: var(--ink); }
.rx-x--quant { border-left-color: var(--accent); }
.rx-x--quant .rx-x__src { color: var(--warn); }
.rx-x--err { border-left-color: var(--danger); background: var(--danger-soft); }
.rx-x--err .rx-x__src { color: var(--danger); }

/* --- Sustitución --- */
.rx-repbar { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin: var(--s-3) 0 var(--s-2); }
.rx-repbar .btn { margin-left: auto; }
.rx-repbar .rx-meta { margin: 0; }
.rx-repout {
  margin: 0; padding: var(--s-3);
  min-height: 90px; max-height: 340px; overflow: auto;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-sunken); color: var(--ink);
  font-family: var(--mono); font-size: var(--fs-xs); line-height: 1.7;
  white-space: pre-wrap; overflow-wrap: break-word;
}

/* --- Móvil --- */
@media (max-width: 720px) {
  .rx-priv { margin-left: 0; }
  .rx-pat { flex-wrap: wrap; }
  .rx-input { flex: 1 1 100%; order: 2; }
  .rx-flags { order: 3; margin-left: auto; }
  .rx-x { grid-template-columns: 1fr; gap: 2px; margin-left: calc(var(--d, 0) * var(--s-3)); }
  .rx-t__n, .rx-t__pos { width: auto; }
  .rx-repbar .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. */
#rx-tool { --alto-herramienta: 468px; }