/* 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> y da un color de reserva; cada categoría solo cambia
   --hit-color, así el resto de estados (activo, atenuado, ámbito) heredan.

   Todos los tonos se mezclan contra el FOLIO (`--hit-paper`) y no contra
   `transparent`: la diferencia entre un color y un velo. `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 y
   una capa interior distinta se ve por su tono, no por su suma. La hoja
   dinámica de estados ya lo hacía así desde el 02/09 (`hitTint` en
   editor_hit_state.js); esto lo lleva al estado en reposo, que es el que
   quedaba. */
.text-hit {
  --hit-color: #64748b;
  position: relative;
  display: inline;
  /* Sin esquinas redondeadas y sin relleno: la mancha de una recomendación
     tiene que salir CONTINUA.

     Una misma recomendación no siempre es una sola marca en el DOM: basta con
     que una palabra lleve encima otra marca —un error de ortografía, un
     conector— para que el trozo salga partido en varias `<mark>` seguidas. Con
     radio de 4 px cada trozo se cerraba por su cuenta y entre dos trozos
     pegados quedaba una muesca; con relleno lateral, además, cada trozo se
     ensanchaba 1 px por lado y empujaba el texto de al lado (la primera
     palabra salía despegada). Los dos síntomas son el mismo canto.

     El relleno vertical tampoco vuelve: con el tono ya opaco, dos trozos de
     línea contiguos se solapaban y el fondo del de abajo tapaba el subrayado
     del de arriba, que aparecía en unas líneas sí y en otras no.

     Lo que marca el principio y el final de una recomendación es el subrayado
     de color, que sí es continuo por definición. */
  border-radius: 0;
  padding: 0;
  color: inherit;
  background-color: color-mix(in srgb, var(--hit-color) 13%, var(--hit-paper, #fff));
  border-bottom: 2px solid var(--hit-color);
  cursor: pointer;
  font-weight: 500;
  transition: var(--transition-smooth);
  outline: none;
}

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

.text-hit-discourse { --hit-color: var(--color-discourse); }
.text-hit-lexical { --hit-color: var(--color-lexical); }
.text-hit-morphosyntax { --hit-color: var(--color-morphosyntax); }
.text-hit-general { --hit-color: #64748b; }
.text-hit-variant-first-person-singular { --hit-color: var(--hit-first-person-singular); }
.text-hit-variant-first-person-plural { --hit-color: var(--hit-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
   public_editor.js), porque ProseMirror revierte clases ajenas al re-pintar. */
.text-hit.is-active {
  border-bottom-color: var(--hit-color, var(--primary));
  background-color: color-mix(in srgb, var(--hit-color, var(--primary)) 26%, var(--hit-paper, #fff));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hit-color, var(--primary)) 40%, transparent);
}

/* Los ámbitos amplios se atenúan en el color de su categoría (nada de morados
   fijos): frase = subrayado sólido fino, párrafo = tinte suave con subrayado
   discontinuo fino. 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-color, #64748b) 9%, var(--hit-paper, #fff));
  border-bottom-style: solid;
}

.text-hit-scope-paragraph {
  background-color: color-mix(in srgb, var(--hit-color, #64748b) 6%, var(--hit-paper, #fff));
  border-bottom-width: 1px;
  border-bottom-style: dashed;
  border-bottom-color: color-mix(in srgb, var(--hit-color, #64748b) 55%, var(--hit-paper, #fff));
}

.hit-popover-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
}

.hit-popover-kicker {
  display: inline-flex;
  max-width: calc(100% - 36px);
  margin-bottom: 8px;
  padding: 2px 8px;
  color: var(--primary-hover);
  background: var(--primary-light);
  border-radius: 999px;
  font-family: monospace;
  font-size: 11px;
  font-weight: 700;
}

.hit-popover-stack-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
  margin: -4px 0 12px;
  padding: 5px 6px;
  color: #475569;
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
}

.hit-popover-stack-nav[hidden] {
  display: none;
}

.hit-popover-stack-nav span {
  min-width: 0;
  text-align: center;
  line-height: 1.25;
}

.hit-popover-assist {
  width: 100%;
  min-height: 42px;
  margin-bottom: 10px;
}

.hit-popover-assist.is-loading i {
  animation: spin 1s linear infinite;
}

.hit-ai-panel {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(48vh, 520px);
  margin: 0 0 10px;
  padding: 10px;
  background: #f8fafc;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, 0.55) transparent;
}

.hit-ai-panel::-webkit-scrollbar {
  width: 8px;
}

.hit-ai-panel::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.42);
  border-radius: 999px;
}

.hit-ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--primary-hover);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hit-ai-header code {
  max-width: 160px;
  overflow: hidden;
  color: #64748b;
  background: #eef6ff;
  border-radius: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hit-ai-option {
  padding: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.hit-ai-option + .hit-ai-option {
  margin-top: 8px;
}

.hit-ai-option-label {
  display: block;
  margin-bottom: 4px;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.hit-ai-option p {
  margin: 0;
  color: var(--text-main);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.hit-ai-option small {
  display: block;
  margin-top: 6px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
}

.hit-ai-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.mini-action {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 9px;
  font-size: 12px;
}

.mini-action i {
  width: 15px;
  height: 15px;
}

.hit-ai-status,
.hit-ai-error,
.hit-ai-empty {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.4;
}

.hit-ai-status i {
  width: 16px;
  height: 16px;
  color: var(--primary);
  animation: spin 1s linear infinite;
}

.hit-ai-error {
  color: #b91c1c;
}

.hit-ai-error i {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.hit-popover-details {
  width: 100%;
}