/* Shared editor layout elements */.editor-document-card {
  color: inherit;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}.editor-structure-panel h1 {
  font-family: var(--font-heading);
  font-size: 24px;
  line-height: 1.2;
}

.phraseology-btn {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  color: #24415f;
  text-align: left;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  cursor: pointer;
}

.phraseology-btn i {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--primary);
}

.phraseology-btn span {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.editor-main-panel {
  grid-area: editor;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.agent-editor-frame {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  min-height: calc(100vh - 112px);
  padding: 0 0 20px;
}

.icon-tool {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 34px;
  color: #475569;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.icon-tool:hover {
  color: var(--text-main);
  background: #f1f5f9;
  border-color: #e2e8f0;
}

.icon-tool i {
  width: 18px;
  height: 18px;
}

.editor-zoom-label {
  min-width: 48px;
  color: #475569;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 800;
}

.editor-document-card {
  display: flex;
  flex-direction: column;
  width: min(100%, 1120px);
  flex: 1;
  min-height: 0;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.editor-document-card {
  min-height: calc(100vh - 260px);
}

.rich-editor-surface {
  --editor-zoom: 1;
  flex: 1;
  min-height: calc(100vh - 330px);
  padding: 46px 64px 132px;
  overflow-y: auto;
  color: #1f3147;
  background: #ffffff;
  /* Las marcas de sugerencia se mezclan contra el folio para no componerse
     entre ellas cuando se solapan (ver `hitTint` en editor_hit_state.js). El
     token va aquí, junto al fondo del que habla, para que los dos cambien a la
     vez el día que el folio deje de ser blanco. */
  --hit-paper: #ffffff;
  font-size: 18px;
  line-height: 1.8;
  outline: none;
}

.rich-editor-content {
  min-height: 100%;
  font-size: calc(18px * var(--editor-zoom, 1));
  line-height: 1.8;
  outline: none;
}

.rich-editor-content {
  max-width: 760px;
  margin: 0 auto;
}

.rich-editor-content > *:first-child {
  margin-top: 0;
}

.rich-editor-content h1,
.rich-editor-content h2,
.rich-editor-content h3 {
  margin: 1.35em 0 0.65em;
  color: var(--text-main);
  font-family: var(--font-heading);
  line-height: 1.2;
}

.rich-editor-content h1 {
  font-size: 1.8em;
}

.rich-editor-content h2 {
  font-size: 1.45em;
}

.rich-editor-content h3 {
  font-size: 1.2em;
}

.rich-editor-surface p,
.rich-editor-content p {
  margin-bottom: 1em;
}

.suggestion-actions-state {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 34px 20px;
  color: var(--text-muted);
  text-align: center;
  background: #f8fafc;
  border: 1px dashed var(--border-color);
  border-radius: 12px;
}

.suggestion-actions-state i {
  color: var(--primary);
}

.suggestion-actions-state h3 {
  color: var(--text-main);
}

.editor-hit {
  scroll-margin: 120px;
}

.text-hit.is-focused {
  animation: focusPulse 1.2s ease;
}

@keyframes focusPulse {
  0%, 100% {
    box-shadow: none;
  }
  35% {
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.22);
  }
}

/* El cambio recién aplicado (decoración de `RecentEdit`, en
   editor_content_adapter.js). Confirma dónde ha caído una sustitución, porque
   el gesto que la aplica apaga a la vez la marca que decía dónde estaba.

   Verde y no un color de nivel de la lengua: esto no es una recomendación, es
   el acuse de una acción terminada, y el verde ya significa eso en el producto
   (`.editor-file-status.is-success`). Los tres colores de categoría —violeta,
   cian y ámbar— quedan libres, y también el ámbar del rotulador.

   Se enciende y se apaga sola: la animación termina antes que el temporizador
   que retira la decoración, de modo que lo último que se ve es el folio normal
   y no un fondo que desaparece de golpe. */
.editor-recent-edit {
  border-radius: 3px;
  background-color: color-mix(in srgb, #087443 22%, var(--hit-paper, #fff));
  animation: recentEditFade 2.2s ease-out forwards;
}

/* Se anima el FONDO y no la opacidad: la opacidad se llevaría por delante el
   texto sustituido, que es justo lo que se quiere enseñar. */

/* Un borrado no deja texto que encender. La señal es el punto donde estaba lo
   que ya no está: una brizna vertical del mismo verde, del alto de la línea.
   Sin texto dentro —solo fondo y ancho—, así que no entra en el texto del
   documento ni en lo que se exporta. */
.editor-recent-edit-gap {
  display: inline-block;
  width: 3px;
  height: 1em;
  margin: 0 1px;
  vertical-align: text-bottom;
  border-radius: 2px;
  background-color: #087443;
  animation: recentEditGapFade 2.2s ease-out forwards;
}

@keyframes recentEditFade {
  0% { background-color: transparent; }
  10% { background-color: color-mix(in srgb, #087443 22%, var(--hit-paper, #fff)); }
  65% { background-color: color-mix(in srgb, #087443 22%, var(--hit-paper, #fff)); }
  100% { background-color: transparent; }
}

@keyframes recentEditGapFade {
  0% { background-color: transparent; }
  10% { background-color: #087443; }
  65% { background-color: #087443; }
  100% { background-color: transparent; }
}

/* Con movimiento reducido no se anima: se enseña el fondo y lo retira el
   temporizador, que es el mismo acuse sin nada que parpadee. */
@media (prefers-reduced-motion: reduce) {
  .editor-recent-edit,
  .editor-recent-edit-gap {
    animation: none;
  }
}

/* Lienzo de escritura en móvil. Vivía en la cola del admin editorial (93)
   dentro de su @media 720, pero su consumidor es el editor público. */
@media (max-width: 720px) {
  .rich-editor-surface {
    min-height: 480px;
    padding: 28px 24px 120px;
    font-size: 16px;
  }
}