/*
  LA HOJA EN BLANCO donde se escribe el contrato y el machote (js/editorDocumento.js): la barra de herramientas, el papel, los renglones y las variables.
  Se ve igual que lo que sale impreso (contrato-hoja.css). REGLA: solo variables de tema.css (nada de colores ni tipografías escritas aquí). Prefijo: ed-.
*/

.ed-editor {
  min-width: 0;
}

/* ============================================================ La barra de herramientas (se queda arriba mientras se baja por el texto) */
.ed-barra {
  position: sticky;
  top: var(--ed-arriba, var(--espacio-2));
  z-index: 15;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2) var(--espacio-4);
  max-width: var(--ancho-hoja);
  margin: 0 auto var(--espacio-3);
  padding: var(--espacio-2) var(--espacio-3);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-grande);
  background: var(--color-superficie);
  box-shadow: var(--sombra);
}
.ed-barra[hidden] {
  display: none;
}
.ed-grupo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2);
}
.ed-grupo-variable {
  margin-left: auto;
}
.ed-boton {
  min-height: 2.5rem;
}
.ed-boton[aria-pressed='true'] {
  border-color: var(--color-primario);
  background: var(--color-info-fondo);
  color: var(--color-primario);
}
.ed-boton-negrita {
  min-width: 2.5rem;
  font-weight: 700;
}

/* ============================================================ El papel */
.ed-hoja {
  min-height: 28rem;
  outline: none;
  caret-color: var(--color-tinta);
  cursor: text;
  white-space: normal;
  -webkit-user-select: text;
  user-select: text;
}
.ed-hoja:focus-visible {
  box-shadow:
    0 0 0 3px var(--color-enfoque),
    var(--sombra-hoja);
}
.ed-hoja[data-solo-lectura] {
  cursor: default;
}

/* Cada renglón o párrafo. Los estilos son los mismos de lo que se imprime (hoja-*). */
.ed-bloque {
  position: relative;
  min-width: 0;
  white-space: pre-wrap;
  scroll-margin-top: 9rem;
  scroll-margin-bottom: 8rem;
}
.ed-bloque[data-tipo='parrafo'] {
  margin: 0 0 0.9em;
  text-align: justify;
  hyphens: auto;
}
.ed-bloque[data-tipo='parrafo'][data-vacio] {
  margin-bottom: 0; /* un renglón en blanco mide un renglón, como al imprimir */
}
.ed-bloque[data-tipo='titulo'] {
  margin: 0 0 1.3em;
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}
.ed-bloque[data-tipo='seccion'] {
  margin: 1.4em 0 0.5em;
  font-weight: 700;
  line-height: 1.4;
}
.ed-bloque[data-tipo='firma'] {
  width: min(18rem, 100%);
  margin: 3.5rem auto 0;
  padding-top: 0.35em;
  border-top: 1px solid var(--color-tinta);
  font-size: 0.95em;
  text-align: center;
}

/* Lo que se muestra cuando un renglón está vacío. */
.ed-bloque[data-pista]::before,
.ed-bloque[data-tipo='firma'][data-vacio]::before {
  position: absolute;
  right: 0;
  left: 0;
  color: var(--color-texto-suave);
  font-family: var(--fuente-base);
  font-size: var(--tam-chica);
  font-style: italic;
  font-weight: var(--peso-normal);
  pointer-events: none;
}
.ed-bloque[data-pista]::before {
  content: attr(data-pista);
  text-align: left;
}
.ed-bloque[data-tipo='firma'][data-vacio]:not([data-pista])::before {
  content: 'Nombre de quien firma';
  text-align: center;
}

/* El salto de página: una línea punteada con el botón para quitarlo. */
.ed-bloque[data-tipo='salto'] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-3);
  margin: 1.4em 0;
  padding: var(--espacio-1) 0;
  border-top: 2px dashed var(--color-borde-fuerte);
  color: var(--color-texto-suave);
  font-family: var(--fuente-base);
  font-size: var(--tam-chica);
  white-space: normal;
  -webkit-user-select: none;
  user-select: none;
}
.ed-salto-texto {
  color: var(--color-texto-suave);
}
.ed-quitar-salto {
  min-height: 2rem;
  padding: 0 var(--espacio-3);
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio);
  background: var(--color-superficie);
  color: var(--color-primario);
  font: inherit;
  font-weight: var(--peso-fuerte);
  cursor: pointer;
}
.ed-quitar-salto:hover {
  background: var(--color-info-fondo);
}
.ed-hoja[data-solo-lectura] .ed-quitar-salto {
  display: none;
}

/* ============================================================ Las variables dentro del texto */
.ed-var {
  padding: 0 0.3em;
  border-radius: 0.25em;
  background: var(--color-casilla-fondo);
  color: var(--color-casilla-texto);
  cursor: pointer;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  hyphens: manual;
}
.ed-var:hover {
  outline: 2px solid var(--color-enfoque);
}
.ed-var-vacia {
  background: var(--color-casilla-vacia-fondo);
  color: var(--color-casilla-vacia-texto);
}
.ed-var-blanco {
  background: var(--color-papel);
  color: var(--color-tinta);
  outline: 1px dashed var(--color-casilla-texto);
}
.ed-var-mala {
  background: var(--color-peligro-fondo);
  color: var(--color-peligro);
}
.ed-negrita {
  font-weight: 700;
}
.ed-hoja strong {
  font-weight: 700;
}

@media (max-width: 40rem) {
  .ed-barra {
    position: static; /* en el celular la barra ocuparía media pantalla: se queda arriba del texto, sin seguir al bajar */
    padding: var(--espacio-2);
  }
  .ed-grupo-variable {
    flex: 1 1 100%;
    margin-left: 0;
  }
  .ed-grupo-variable .ed-boton {
    flex: 1 1 auto;
  }
}