/*
  EDITOR DE MACHOTES (js/machoteContrato.js): la hoja en blanco con todo el contrato (css/editor-documento.css) y la lista de variables.
  REGLA: solo variables de tema.css (nada de colores ni tipografías escritas aquí). Prefijo de clases: mc-.
*/

.mc-raiz {
  min-width: 0;
}
.mc-tarjeta-nombre,
.mc-tarjeta-texto,
.mc-variables {
  min-width: 0;
}
@media (max-width: 40rem) {
  .mc-cabecera {
    padding: var(--espacio-2) var(--espacio-3);
  }
}

/* Encabezado que se queda arriba mientras se baja por el texto. */
.mc-cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2) var(--espacio-4);
  padding: var(--espacio-3) var(--espacio-4);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-grande);
  background: var(--color-superficie);
  box-shadow: var(--sombra);
}
.mc-cabecera-izq {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  min-width: 0;
}
.mc-titulo {
  margin: 0;
  font-size: var(--tam-subtitulo);
  overflow-wrap: anywhere;
}
.mc-estado {
  display: block;
  color: var(--color-texto-suave);
  font-size: var(--tam-chica);
}
.mc-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}
.mc-avisos:empty {
  display: none;
}

/* La hoja en la que se escribe (editorDocumento.js) y su ayuda. */
.mc-ayuda {
  max-width: var(--ancho-hoja);
  margin: 0 auto var(--espacio-3);
  color: var(--color-texto-suave);
  font-size: var(--tam-chica);
}

/* La lista de variables: una fila por variable, con sus botones. */
.mc-variables-lista {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}
.mc-variable {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2) var(--espacio-3);
  padding: var(--espacio-2) var(--espacio-3);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background: var(--color-casilla-fondo);
  color: var(--color-casilla-texto);
}
.mc-variable-nombre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-1) var(--espacio-2);
  min-width: 0;
}
.mc-variable-tipo {
  color: var(--color-texto-suave);
  font-size: var(--tam-chica);
}

/* «Más opciones» y «¿Cómo funciona?». */
.mc-mas {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-grande);
  background: var(--color-superficie);
}
.mc-mas > summary {
  padding: var(--espacio-3) var(--espacio-4);
  border-radius: var(--radio-grande);
  color: var(--color-primario);
  font-weight: var(--peso-fuerte);
  cursor: pointer;
}
.mc-mas[open] > summary {
  border-bottom: 1px solid var(--color-borde);
  border-radius: var(--radio-grande) var(--radio-grande) 0 0;
}
.mc-mas-cuerpo {
  padding: var(--espacio-4);
}
.mc-pasos {
  margin: 0 0 var(--espacio-3);
  padding-left: var(--espacio-5);
}
.mc-pasos li {
  margin-bottom: var(--espacio-2);
}
.mc-pasos code {
  padding: 0 var(--espacio-1);
  border-radius: var(--radio);
  background: var(--color-superficie-alt);
}