/* El subrayador del usuario, cuando llega SIN color.

   En el folio conviven dos clases de <mark>: las coincidencias del análisis
   (.text-hit, aquí debajo) y el subrayador de la cinta, que es una función
   normal de procesador de textos. El de la cinta pasa siempre un color y sale
   con su `background-color` puesto; un <mark> desnudo lo pinta el navegador de
   su amarillo puro (#ffff00), que no se parece a nada del producto.

   Eso es lo que Sara encontró el 12/08 —«eliminé un fragmento de un párrafo y
   el párrafo se marcó en amarillo, pero la marca no estaba relacionada con
   ninguna recomendación»— y lo que volvió a salirles a las dos el 02/09. La
   causa era el ATAJO de teclado de TipTap (Ctrl+Shift+H), que llamaba a
   `toggleHighlight()` sin argumento; este arreglo era solo el color, y por eso
   el síntoma volvió.

   El atajo ya no existe (`scripts/tiptap/entry.mjs`), así que ninguna marca
   puede NACER sin color. Esta regla se queda como red: un documento guardado
   antes de aquello, o un JSON de editor con `{"type":"highlight"}` y sin
   `color` —que el validador del servidor admite—, todavía puede traer una. Se
   excluye .text-hit a propósito: esas se pintan por categoría unas líneas más
   abajo. */
[data-editor-surface] mark:not(.text-hit):not([data-color]) {
  background-color: #fde68a;
  color: inherit;
  border-radius: 2px;
}

/* Marcas de sugerencia en el texto. La base neutraliza el amarillo por defecto
   de <mark>; cada categoría cambia el par `--hit-color` / `--hit-tint`, y el
   resto de estados (activo, conector, ámbito) heredan de ahí.

   Los fondos son colores OPACOS y no velos, que es lo que hay que conservar de
   la revisión del 02/09: `suggestionMark` está declarada con `excludes: ""`
   (scripts/tiptap/entry.mjs), así que las marcas se ANIDAN —el ámbito de
   párrafo envuelve al de frase, y ese a la ocurrencia— y dos velos del mismo
   tono se suman. Eso era el sombreado interior con escalones que se veía dentro
   de una sola recomendación: no era un borde, era una capa sobre otra. Opacos,
   dos capas iguales se ven exactamente como una. */
.text-hit {
  --hit-color: #6c6c6c;
  --hit-tint: #e8e8e8;
  /* Sin `position`: una caja posicionada se pinta después que el resto de la
     línea, así que su fondo opaco tapaba el punto de inserción (Amor, 22/09:
     «no se ve el cursor» dentro de una oración resaltada) y, con el relleno de
     abajo, las letras del texto vecino. */
  display: inline;
  /* Radio de 7 px y relleno lateral COMPENSADO con un margen negativo del
     mismo valor (estudio L7, propuesta J1): la caja se ensancha pero no ocupa
     más sitio, así que encender una recomendación no mueve una coma de sitio.

     Una recomendación se parte en varias `<mark>` seguidas cuando otra marca
     la corta —una negrita, una recomendación que se cruza con ella—. En el
     editor, los lados de cada trozo que continúan el vecino llevan
     `data-hit-join` y van sin relleno, margen ni radio (`editor/hit_joins.js`
     y `HIT_JOIN_RULES` en `editor/hit_state.js`): la recomendación se ve como
     una sola banda y ningún trozo tapa el final del anterior.

     `box-decoration-break: clone` redondea también las marcas que ocupan varias
     líneas; sin él sólo se curvan el principio del primer trozo y el final del
     último. */
  border-radius: 7px;
  padding: 1px 4px;
  margin: 0 -4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: inherit;
  /* El tinte es un color, no un velo: dos marcas anidadas no se suman. */
  background-color: var(--hit-tint);
  border-bottom: 0;
  cursor: pointer;
  font-weight: 500;
  transition: var(--transition-smooth);
  outline: none;
}

.text-hit:focus-visible {
  box-shadow: 0 0 0 2px var(--primary);
}

/* Cada categoría trae su par: el relleno (`--hit-color`, el del caso elegido y
   el de identidad en chips y tarjetas) y el tinte (`--hit-tint`, el fondo de la
   ocurrencia visible). */
.text-hit-discourse { --hit-color: var(--color-discourse); --hit-tint: var(--hit-tint-discourse); }
.text-hit-lexical { --hit-color: var(--color-lexical); --hit-tint: var(--hit-tint-lexical); }
.text-hit-morphosyntax { --hit-color: var(--color-morphosyntax); --hit-tint: var(--hit-tint-morphosyntax); }
.text-hit-general { --hit-color: var(--color-general, #6c6c6c); --hit-tint: var(--hit-tint-general); }
.text-hit-variant-first-person-singular { --hit-color: var(--hit-first-person-singular); --hit-tint: var(--hit-tint-first-person-singular); }
.text-hit-variant-first-person-plural { --hit-color: var(--hit-first-person-plural); --hit-tint: var(--hit-tint-first-person-plural); }

/* Hover and active glow */
.text-hit:hover {
  filter: brightness(0.95);
}

/* Ocurrencia activa (analizador): estado fuerte con anillo del color de la
   categoría. En el editor los estados de selección equivalentes se inyectan
   como hoja dinámica por data-hit-id (applyHitStateStyles en
   editor/public_editor.js), porque ProseMirror revierte clases ajenas al re-pintar. */
.text-hit.is-active {
  background-color: var(--hit-color, var(--primary));
  color: var(--text-inverse);
  font-weight: 600;
  border-bottom: 0;
  box-shadow: none;
}

/* El conector, dentro de la oración elegida, en un tono propio y el mismo para
   las seis categorías: si tomase el de la suya, dentro de morfosintaxis saldría
   amarillo. Casi sin relleno lateral, que aquí sí partiría la oración en dos.

   Aquí va por atributo porque es el estado en reposo del probador de la API, y
   ahí el papel de cada marca es fijo. En el editor NO se puede: una misma marca
   es conector de su oración y aparición de un conector repetido según qué se
   esté mirando, así que lo decide `resolveHitDisplay` y se pinta por id
   (`editor/hit_state.js`). */
.text-hit[data-hit-role="connector"] {
  background-color: var(--hit-connector, #141821);
  color: var(--text-inverse);
  font-weight: 600;
  border-radius: 3px;
  padding: 0 1px;
  margin: 0 -1px;
}

/* Los ámbitos amplios se aclaran sobre el tinte de su categoría: son fondos de
   frase o de párrafo enteros y con el tinte completo pesarían más que las
   ocurrencias que envuelven. El ámbito documento no tiene regla: sus dos reglas
   (`list-usage` y `missing-definitions`) emiten una ocurrencia sin
   desplazamientos, así que nunca llega a marcarse nada en el texto. */
.text-hit-scope-sentence {
  background-color: color-mix(in srgb, var(--hit-tint) 60%, var(--hit-paper, #fff));
}

.text-hit-scope-paragraph {
  background-color: color-mix(in srgb, var(--hit-tint) 35%, var(--hit-paper, #fff));
}