/* Nebrija corrections — overlay layer on top of the editable document.
 * Loaded alongside the editor; tokens come from the host's styles.css.
 * Mantener consistencia con paleta semántica de app.js (regla 03-frontend-spa).
 */

/* Base — todas las correcciones */
.mark-correction {
  border-bottom: 2px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color var(--t-fast, 120ms);
}

.mark-correction:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

/* Categorías → color del subrayado */
.mark-correction.mark-cat-error {
  border-bottom-color: #b91c1c;
  background-color: rgba(185, 28, 28, 0.06);
}

.mark-correction.mark-cat-warn {
  border-bottom-color: #d97706;
  background-color: rgba(217, 119, 6, 0.06);
}

.mark-correction.mark-cat-info {
  border-bottom-color: #2563eb;
  background-color: rgba(37, 99, 235, 0.05);
}

.mark-correction.mark-cat-style {
  border-bottom-color: #7c3aed;
  background-color: rgba(124, 58, 237, 0.05);
}

.mark-correction.mark-cat-neutral {
  border-bottom-color: #6b7280;
  background-color: rgba(107, 114, 128, 0.05);
}

/* Estados — cuando el editor decide */
.mark-correction.is-accepted {
  border-bottom-style: solid;
  background-color: rgba(5, 150, 105, 0.08);
  border-bottom-color: #059669;
}

.mark-correction.is-modified {
  border-bottom-style: solid;
  background-color: rgba(8, 145, 178, 0.08);
  border-bottom-color: #0891b2;
}

.mark-correction.is-rejected {
  border-bottom-style: dashed;
  opacity: 0.5;
  text-decoration: line-through;
  text-decoration-color: #9ca3af;
}

.mark-correction.is-postponed,
.mark-correction.is-consult {
  border-bottom-style: dotted;
  background-color: rgba(245, 158, 11, 0.05);
}

.mark-correction.is-blocked {
  border-bottom-style: double;
  background-color: rgba(220, 38, 38, 0.04);
  cursor: not-allowed;
}

/* Anclajes imperfectos */
.mark-correction.is-fuzzy {
  border-bottom-style: dashed;
}

.mark-correction.is-ambiguous {
  border-bottom-style: dotted;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0px,
    transparent 4px,
    rgba(0, 0, 0, 0.04) 4px,
    rgba(0, 0, 0, 0.04) 8px
  );
}

/* Decoración seleccionada activa (la que el panel muestra) */
.mark-correction.is-active {
  outline: 2px solid var(--accent, #0f766e);
  outline-offset: 1px;
  border-radius: 2px;
}

/* Paragraph alignment — render visual when [data-text-align="…"] is present */
.ProseMirror p[data-text-align="left"],
.ProseMirror h1[data-text-align="left"],
.ProseMirror h2[data-text-align="left"],
.ProseMirror h3[data-text-align="left"],
.ProseMirror h4[data-text-align="left"] {
  text-align: left;
}
.ProseMirror p[data-text-align="center"],
.ProseMirror h1[data-text-align="center"],
.ProseMirror h2[data-text-align="center"],
.ProseMirror h3[data-text-align="center"],
.ProseMirror h4[data-text-align="center"] {
  text-align: center;
}
.ProseMirror p[data-text-align="right"],
.ProseMirror h1[data-text-align="right"],
.ProseMirror h2[data-text-align="right"],
.ProseMirror h3[data-text-align="right"],
.ProseMirror h4[data-text-align="right"] {
  text-align: right;
}
.ProseMirror p[data-text-align="justify"],
.ProseMirror h1[data-text-align="justify"],
.ProseMirror h2[data-text-align="justify"],
.ProseMirror h3[data-text-align="justify"],
.ProseMirror h4[data-text-align="justify"] {
  text-align: justify;
}

/* Versálitas (smallCaps): refuerza el render dentro del editor. La marca
   Tiptap emite `<span style="font-variant: small-caps">`, pero este selector
   garantiza el estilo aunque el inline style cambie (p. ej. tras copiar/pegar
   un span con `font-variant-caps`). NO usar text-transform: uppercase — eso
   sería MAYÚSCULAS, no versálitas. */
.ProseMirror [style*="small-caps"] {
  font-variant: small-caps;
}

/* Reanclaje fallido — el texto cambió y no se pudo reanclar */
.mark-correction.is-manual_anchor_needed {
  opacity: 0.55;
  color: #6b7280;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0px,
    transparent 5px,
    rgba(107, 114, 128, 0.15) 5px,
    rgba(107, 114, 128, 0.15) 10px
  );
  border-bottom-style: dotted;
  border-bottom-color: #6b7280;
  cursor: help;
}